Building a Jamstack Food Ordering App with Strapi, Gridsome & Snipcart 6/6

This article is a guest series by the great Ekene Eze. He’s leading the Developer Experience team at Flutterwave and wrote this blog post through the Write for the Community program.

This series will walk you through the processes of setting up your own food ordering application and by extension any e-commerce app using modern development tools like Strapi, Gridsome and Snipcart.

Table of Contents: 1. Part 1 - Generating a Strapi app and creating products 2. Part 2 - Setting up a Gridsome project 3. Part 3 - Consuming products with Gridsome and GraphQL 4. Part 4 - Creating single product views with Gridsome templates 5. Part 5 - Implementing cart and checkout with Snipcart 6. Part 6 - Deploying the apps

Repos:

• Gridsome Frontend - https://github.com/kenny-io/mealzers-frontend
• Strapi Backend - https://github.com/kenny-io/mealzers-backend

In the last part, we added cart and checkout functionalities to the Gridsome application using Snipcart. It is safe to say that users can place orders for our products and you can manage those orders on your Snipcart dashboard as well. In this part, we'll walk through the process of deploying both the Strapi and Gridsome applications.

Deploying the Strapi application

Different hosting platforms support Strapi. For the scope of this series, I will deploy to Heroku. The next steps will guide you through the same process to deploy your Strapi application to Strapi. This took me a little time to figure out, but the good news is, I went through the whole figuring out the process so you won't have to.

Set up the production environment The first thing you need to do is to separate your environments. I think this is very important to note. At the moment, if you check back on your Strapi application's folder structure, the config directory looks like this:

The database.js file here is the local database that handles all your data while in development. Now that we are deploying to production, we need a production database set up. The new Strapi beta version documentation uses a structure like config/environment/production/database.json. We'll adopt this structure to better differentiate our development and production configurations. Next, re-organize your file system and update your config directory to look like this instead:

The environment directory accounts for both production and development. It also makes it possible for you to add more environments in the future e.g staging or pilot.

Next, update the config/environment/production/database.js file with the snippet below:

1    // src/config/environment/production/database.js
2    
3    const parse = require("pg-connection-string").parse;
4    const config = parse(process.env.DATABASE_URL);
5    
6    module.exports = ({ env }) => ({
7      defaultConnection: "default",
8      connections: {
9        default: {
10          connector: "bookshelf",
11          settings: {
12            client: "postgres",
13            host: config.host,
14            port: config.port,
15            database: config.database,
16            username: config.user,
17            password: config.password,
18          },
19          options: {
20            ssl: false,
21          },
22        },
23      },
24    });

It is worthy to mention at this point that we are using Postgres to cater for our production database needs. This is just a personal preference, Strapi supports a host of other database options you can check out here.

Set up Heroku

With this done, go ahead and create a Heroku account if you don't already have one. When you're done, create a new Heroku application.

Next, navigate to Resources tab under Add-on and search for the Postgres Heroku add on and install it into your application. With Postgres installed, navigate to settings and reveal your configuration variables like so:

What you need to do next is copy the DATABASE_URL and split it to match the same variables contained in your config/environment/production/database.json file. According to my project, (the screen recording above), this is mine:

1    DATABASE_URL = postgres://yaygszolwrqhpr:f075dae0a697e565545ac15003064f9814f2e2c584969804a2de56f1969ebbdc@ec2-52-73-199-211.compute-1.amazonaws.com:5432/d2s3u3oalapsgc

This means that —

1    DATABASE_HOST = ec2-52-73-199-211.compute-1.amazonaws.com
2    DATABASE_PORT = 5432
3    DATABASE_NAME = d2s3u3oalapsgc
4    DATABASE_USERNAME = yaygszolwrqhpr
5    DATABASE_PASSWORD = f075dae0a697e565545ac15003064f9814f2e2c584969804a2de56f1969ebbdc
6    NODE_ENV = production

In your Heroku Config Vars section, add the keys and values above from your own DATABASE_URL. This makes it possible for Strapi to connect to this database. When you're done, your config variables should look like this:

At this point, we are all set with both Heroku and Postgres.

Deploy Strapi app on Heroku

First, install the Heroku CLI locally. This will make it possible for you to run heroku commands on your terminal. Next, initialize a Git repository and commit the project with the commands below:

1    cd mealzers
2    git init

Note that the command above should be run in the Strapi project root directory. The name we gave the Strapi project in Part 1 is mealzers hence the command above.

To connect the Git repository we just initialized above with our Heroku app, run the command below:

heroku git:remote -a mealzers-backend

mealzers-backend is the name of the Heroku app we created.

Commit all the recent changes we've made to the Strapi app (mostly the database set up files and folders) with the command below:

1    git add .
2    git commit -m "Set up postgres database for prod"

Be sure to omit any package-lock.json or yarn.lock files as they will cause deployment problems if present.

Finally, to Deploy the app on Heroku, we run the command below:

git push heroku master

This should deploy the app and return the production URL in the logs like so:

If you navigate to the https://mealzers-backend.herokuapp.com/admin route logged above, you should be able to create an admin user account and set up more products that will be stored in your production database. You can also set the user permissions just like we did in development and try it out again.

Deploying the Gridsome app

Before you deploy the existing Gridsome application, there are a few updates you should make to ensure that your deployment doesn't fail. You need to update the images in components/Products.vue and in templates/Product.vue. Replace every occurrence of:

http://localhost:1337${edge.node.image}

with

https://mealzers-backend.herokuapp.com${edge.node.image}

This way, we are reading the images from the live server.

My platform of choice for deploying static sites is Netlify. In three simple steps, you can get your static sites up and running on Netlify in minutes.

• Connect your repository
• Add your project build settings
• Deploy your site.

Connect your repository

The first thing you need to do is to push the Gridsome application to a Git repository. I want to blindly assume that you can do this on your own so we can move forward and connect to Netlify. However, it's okay if you can't, here's a quick guide for you. I have already pushed my Gridsome app to Github here:

Next, create a free Netlify account here. When you're done, log in to your dashboard and create a New site from Git.

If you have a brand new Netlify account, your dashboard would probably look different at this point, but you should be able to find the button to create a New Site from Git easily.

Here, select Github as the provider of choice (since our Gridsome project is hosted on Github). Next, complete the connection to Github and then search for the repository that contains the project you want to deploy. Netlify won't have access to any repository by default, hence, you need to authorize it by configuring Netlify on Github

Authenticate the Github login prompts and select the repository you wish to connect to Netlify, In this case, I'm selecting the mealzers-frontend repository that has my Gridsome project source code.

Once this is done, click the save button and you will be redirected to Netlify where the selected repository should now appear. Click on it to proceed.

From here, you will be presented with a page to configure the build settings. You're telling Netlify what to do to deploy the site for you by providing the build command and publish directory requested in the next step:

Click the Deploy site button and voila, your site will be deployed. Netlify will deploy your Gridsome application and provide you with a live URL where you can access it. What's more? you can edit the default URL to any name of your choosing.

Conclusion

With this, we've come to the conclusion of this series. In the first part, we set up a Strapi application and created some products. In the second part, we set up a Gridsome application and provisioned it to consume the products we created in part 1. Moving on to the 3rd part, we consumed the products from Strapi and displayed them in the Gridsome application where users can interact with it. In the 4th part, we added single product page views to show more information about individual products. In the 5th part, we added cart and checkout functionalities to the application so that users can place orders for the products. Finally, in this part, we deployed the Strapi application to Heroku and deployed the Gridsome app to Netlify.

https://mealzers.netlify.app