Yireo - Developer training

Open main menu

Vue Storefront 1 Fundamentals On-Demand course

Preparing for the PWA

Duration: 08:03 | Last Modified 27 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

Preparing for the PWA

What are the minimum requirements for running the PWA
and how to get up and running quickly

To get started with the PWA, it is important to get the tools right. There are some system requirements to take care off. And we'll also discuss how to get started with a new PWA quickly.

System requirements

  • Use Node LTS
    • Node 10, 12 or 14
    • Be careful with installing yarn (with latest node version)
    • The newer the better (faster)
  • Tools
    • yarn and npm
    • git
    • pm2, lerna (optional)
  • Addresses and ports
    • PWA (localhost:3000)
    • API endpoint (localhost:8080)

System requirements

Try to make sure to run the latest Node version. Performance issues are often fixed by upgrading your Node version. For instance, Node 14 was not yet supported by some of the dependencies for quite some time, but as soon as this was fixed, upgrading to Node 14 gives a performance boost. Also, try not to use odd numbers of Node, which are known to be less stable. Use tools like n or nvm to switch between Node versions.

For any kind of Node development, it is important to have yarn and npm installed. Also make sure you have Git up and running. Installing pm2 and lerna are optional. You can install them with the following commands:

npm install -g lerna
npm install -g pm2

Storefront CLI

Installation:

npm install -g @vue-storefront/cli

Create a new project:

vsf init my-project

Generate modules:

vsf init:module dealers

Configure a shipped theme:

vsf init:theme .

Storefront CLI

The easiest way to kickstart your own project is to install the vsf CLI globally and then use it to initialize a new project. The vsf init abc command fires up a wizard, asking you specific questions like which VSF version you would like to install, which theme you would like to use, etcetera.

Note that once the project is running, a configuration file config/local.json is generated and you will not use the vsf CLI anymore. You would simply check out the project from Git (which includes the configuration file), install dependencies using yarn install and then run yarn dev. The vsf CLI is there only to kickstart new projects.

The creation of a theme and a module is discussed later. You can use the vsf command for this.

Summary

  • Make sure system requirements are in place
  • Install vsf globally
  • Gathering all files with vsf init

Coming up: Running the PWA

# Practical exercise - Make sure to have Node, `npm` and `yarn` installed - Install the `vsf` tool globally - Use it to kickstart a new Vue Storefront PWA project - Confirm that you have a running environment (based on the Vue Storefront public demo)

Extensions

GitHub organizations

Legal information

Other Yireo sites

Get Social

About Yireo