Yireo - Developer training

Open main menu

Vue Storefront 1 Fundamentals On-Demand course

Starting with the Vue Storefront 1 PWA

Duration: 11:49 | Last Modified 09 August 2021

This is a lesson preview of our Yireo On-Demand training on Vue Storefront 1 Fundamentals

This is a preview lesson only

Note that this is a preview lesson. When accessing this lesson as part of the full training, there are a couple of benefits: The materials are available via the Yireo Courseware portal and can be presented as a slideshow, progress can be monitored, additional resources will be available. And obviously, all lessons - instead of just the preview lessons - will be available to you.

Get full access to the Vue Storefront 1 Fundamentals training

Student notes

Starting with the Vue Storefront 1 PWA

Now that the PWA sources are setup, we are good to go to start using the PWA. But where to start? This lesson introduces the first bits of configuration, and sums up the 3 official ways of starting the PWA under a http://localhost:3000 address.

VSF PWA configuration

PWA configuration file config/local.json:

"api": {
    "url": "http://test.vuestorefront.io:8080"
},
"elasticsearch": {}
"storeViews": {}

The PWA is currently configured with the demo API

The configuration of the PWA is located in a file config/local.json. If the file config/local.json does not exist, the file config/default.json is used instead. If both files exist, since VSF 1.12, the two files are merged together: Thanks to this, you could copy only those files that you wish to change from the default file to the local.json file.

At first, we'll focus during the installation on three sections in this PWA configuration: The API URL which is currently a demo URL, but could be pointing towards http://localhost:8080 in case of a local stack. Next, there is the ElasticSearch main configuration (elasticsearch) while there is also a definition of the Magento StoreViews which includes some details on ElasticSearch as well. This will be all discussed in later lessons.

Running the PWA

  • yarn dev
    • Start the PWA from the terminal
    • Recommended approach in development
  • yarn start
    • Use PM2 to start the PWA
    • ./node_modules/.bin/pm2 delete server to remove all of this
    • Recommended approach in production
  • Via Node
    • When initializing a project with the vsf CLI
    • Kill or reboot to get rid of it

Beginners tip: Only use yarn dev when you are starting with Vue Storefront development

This lesson is mainly about how to run the PWA. In short, my recommendation is to use the command yarn dev: This outputs any errors right away in the same place where the command is triggered. It is easy to start, easy to debug. However, it could be also good to test out the yarn start command: This is just a scripted form of the command pm2 start ecosystem.json which will start all required services using PM2. This also means that logs are not written to the terminal anymore, but are sent to logs in the background. By using the command ./node_modules/.bin/pm2 logs you can see those logs. We'll discuss PM2 in a separate chapter when dealing with VSF1 in production. For now, it is good enough to realize that in a local development environment, it is less convenient to start with PM2 (better start with yarn dev). And therefore, it is good to know that you can stop all services with pm2 stop and delete them entirely with pm2 delete.

The last option in the list is kind of strange: Via Node. Obviously, Vue Storefront 1 is written in Vue and TypeScript, so Node is all over the place. However, the reason why this is in the list is because the installation procedure of vsf init not only downloads and configures the PWA, but it will run the PWA as a last step as well. Right after the installation using vsf init, you can navigate towards http://localhost:3000 and see the PWA in action. However, there is no terminal running yarn dev and there is no process to manage with PM2. There is a third mechanism of running the PWA process, a simple Node task that is run in the background.

Unfortunately, this third option is often causing confusion. For instance, how to stop those processes. The answer is: You can't. Well, at least not in a decent way. The only way to remove those running processes is by rebooting (yes, this is really an advice) or by killing the relevant processes. Under Linux, you could run the command ps aux | grep node to see list those processes that involve running the PWA. And then you could run a command like killall /usr/local/bin/node (in case this is the path towards your Node program) to kill those processes. It is not perfect, but still really important to know about.

Validations

  • Check if the PWA is running
    • No errors in console
    • http://localhost:3000

To validate whether the PWA is running, you can simply navigate to http://localhost:3000. I personally use this also a simple check, before I start running the PWA. If I'm starting up my development environment, I always want to know whether nothing is listening on localhost port 3000. If there is already something listening on that port, I'd rather kill it first and then have a clean start. So that once you will run yarn dev, you will not run in port conflicts and you also know that nothing else is waiting system resources. Also, make sure that if the yarn dev command is running, no errors are reported. It should read that all is compiled successfully, perhaps with warnings, but without errors. If there are errors, most likely you are unable to start the PWA.

Summary

  • Brief overview of the PWA configuration
  • Know the difference between yarn dev and yarn start
  • Check http://localhost:3000

To summarize this lesson, we have briefly looked at the configuration of the PWA, but we'll dive much deeper into things later. It is also important to know the difference between running the yarn dev command and the yarn start (PM2) command. And finally, always check http://localhost:3000 for output. If you are not running the PWA, there should be zero output. If you are running the PWA, there should be output.

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo