Setting up the Front-end Interface to Work with the Smilecook API

Please download the smilecook-vuejs folder, which contains the frontend website source code, from https://github.com/TrainingByPackt/Python-API-Development-Fundamentals/tree/master/Lesson10/Frontend:

1. Create a new app in the Heroku platform, which is for deploying our frontend web interface:

   Figure 10.26: Creating a new app in the Heroku platform

2. Once the app is created, we go to the Settings tab and then Config Vars. Here, we are going to set up an environment variable, which will be used to store the backend API URL:

   Figure 10.27: Setting up an environment variable

3. Set the variable name to be VUE_APP_API_URL, and insert the backend Smilecook API URL here.
4. Open the smilecook-vuejs project in PyCharm.
5. In the PyCharm console, type in the following command to log in to the Heroku CLI:

   $ heroku login

6. Then, initialize git and add the Heroku repository to the git:remote repository:

   $ git init
   $ heroku...