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:
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.
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.
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.
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.
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.
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.
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.
Ekene is a Developer Experience Engineer and Technical Writer. He is currently working with the Developer Experience team at Netlify where they build tools, create content, open-source repos, and demos to teach and also help developers build a better web with Netlify's products and services.