Set up Venia for PWA development

Transcript

Hi everybody and welcome to Setting Up Venya for Development. In this tutorial video we’ll be going through the steps listed on the Setup Venya Storefront documentation page. Before we begin, I would like to point out the troubleshooting link. Click on this link if you encounter any problems during the setup. Also highlighted are links to the prerequisites you need to get a Venya Storefront up and running. The first step is cloning the PWA Studio repository using Git. Copy the command shown in this section and run it in a terminal.

After the repository is cloned into your local machine, switch to the newly created PWA Studio directory.

The next step is to install the project dependencies using the yarn install command. As mentioned on the info box, if you run into problems during the installation step, deleting the node modules directory usually helps.

Dependency installation can take a while to finish depending on your network and processor speed, so we’re going to go ahead and speed up this part of the video.

In this step you will specify the location of the Magento back-end server. If you do not have a Magento back-end server available, use the default Magento back-end URL value. This URL points to a Magento 2 cloud instance used for Venya development and demonstrations. For most Venya development setups, using the default back-end URL value is enough to get started. If you need more control over the Magento back-end server, you have the option of using a local Magento instance. Setting up a Magento instance is out of the scope of this video, but this section contains links to topics and technologies to help you get started. Run the following command to copy the sample environment file to one that the project is configured to use. This file contains environment variables that the project uses for the building and running of Venya.

Use a file editor such as vim to make changes to the new environment file.

This line contains the configuration for the Magento back-end URL mentioned earlier. If you want to use a different Magento back-end server, this is where you specify its URL. For our purposes, we will leave the default value to use the shared cloud instance. Since we are setting up Venya for development, it would be helpful to enable service worker debugging. Uncomment this line to enable service worker debugging.

For this last step, we’ll be building and starting the Venya storefront. When doing setup for the first time, you may be asked to provide system credentials. This is needed to generate an SSL certificate for the storefront. The project provides three different commands for starting Venya depending on the development environment you want to work with. For this video, we will use the first one to start a development environment that only watches for changes in the Venya package. When the server starts, the terminal will show a unique URL for the storefront and GraphQL playground. Paste the storefront address into the browser to navigate to the storefront. Congratulations! You’ve set up a development instance of the Venya storefront. If you have any questions or run into problems, feel free to contact us on our public Slack channel. Thanks for watching!