Deliveroo clone with Next.js, GraphQL, Strapi and Stripe (7/7)

Disclaimer You can find the updated version of this tutorial

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

Table of contents

• 🏗️ Setup (part 1)
• 🏠 Restaurants (part 2)
• 🍔 Dishes (part 3)
• 🔐 Authentication (part 4)
• 🛒 Shopping Cart (part 5)
• 💵 Order and Checkout (part 6)
• 🚀 Bonus: Deploy (part 7) - current

Note: the source code is available on GitHub.

🚀 Bonus: deploy

At this point, we only need to deploy our API and our web app. Strapi can be hosted on any major provider offering node deployments (AWS, Heroku, DO). Read further about the deployment of Strapi.

Note: for deployment you will need to change your URLs and connection strings from the default localhost:1337 we were using in the tutorial to the absolute server URL you're deploying to.

In a real-world application, it would be advised to use webpack environment variables to prevent having to manually change the URL every time you deploy to production

Bonus: AWS File Upload

If deploying your backend to a provider that does not persist storage on the server like Heroku, the default Strapi local server upload will not work as your files on the server is automatically wiped periodically.

Strapi does supports easy file upload to S3, to enable it to follow the instructions below.

Strapi Docs(https://docs-v3.strapi.io/developer-docs/latest/development/plugins/upload.html)

To install the strapi-aws-upload package go to the root of your folder you created Strapi in:

1cd backend
2npm install strapi-upload-aws-s3@alpha --save

After the package is installed you can navigate in your browser to: http://localhost:1337/admin/plugins/upload/configurations/development

You should see configuration options for your file upload storage options for the respective environment

Select Amazon Web Service S3 from the Provider dropdown

Enter your respective AWS Access Key ID, Secret, Region, and Bucket name, also make sure the enable file upload is flipped to ON

In the frontend code, make sure to remove the localhost:1337 from your img src attribute. You can now just use res.image.url to grab the S3 image link

You will have to do this for both the RestaurantList index.js component and restaurants.js page

Example:

That's all it takes to enable S3 file uploads with Strapi!

Backend

Init a git project and commit your files:

1cd backend
2rm package-lock.json # May involve errors if not removed
3git init
4git add .
5git commit -am "Initial commit"

Make sure the Heroku CLI is installed on your computer and deploy:

1heroku create
2heroku addons:create mongolab:sandbox --as DATABASE
3git push heroku master

To get Strapi working on Heroku you will need to set your database connection strings:

Login to Heroku, navigate the newly app created. YourApp -> Settings -> Reveal Config Var

You will need to add these config variables in order for Strapi to connect to the DB.

These config variables can be deconstructed from the standard DATABASE_URI value you will see on this page.

Create new values breaking down the connection string as followed below:

Note: your values will differ from these, but be similar structure:

DATABASE_AUTHENTICATION_DATABASE = value starting with heroku_ all the way to the colon of your string (i.e. heroku_2dcnd31p)

DATABASE_NAME = same as DATABASE_AUTHENTICATION_DATABASE (i.e. heroku_2dcnd31p)

DATABASE_HOST = string starting with ds followed by numbers ending in .mlab.com (i.e. ds244132.mlab.com)

DATABASE_PORT = 5 digits following the colon of the host name (i.e. 25432)

DATABASE_USERNAME = same as DATABASE_NAME

DATABASE_PASSWORD = random character string after the colon of the DATABASE_USERNAME, all the way to the @ sign

You can view your Strapi backend by visiting the URL/route provided by heroku /admin (https://yourapp.com/admin).

Note: you will have to redefine your permissions rules from the interface. This workflow will be improved in the near future.

Next Deployment

You can easily host your front end on Heroku as well. You will need to modify your packages.json file to add in a heroku-postbuild option that will be run once the code is deployed to start your app. You can also add in the -p $PORTflag to your start command

Modify the scripts section if your packages.json file match:

packages.json

1  "scripts": {
2    "dev": "node server.js",
3    "build": "next build",
4    "start": "NODE_ENV=production node server.js -p $PORT",
5    "heroku-postbuild": "next build"
6  }

Heroku assigns a port dynamically, this is accessible from process.env.PORT. We will need to tell our express server to listen on this port or the default assigned 3000 port.

This will allow us to run locally on port 3000 and in production to the dynamically assigned Heroku port.

1process.env.PORT || 3000

Full server.js file:

Now create the git repo for the frontend:

Init a git project and commit your files:

1cd ..
2cd frontend
3rm package-lock.json # May involve errors if not removed
4git init
5git add .
6git commit -am "Initial commit"

Then deploy to Heroku:

1heroku create
2git push heroku master

Your command line should show the URL for the application where you can view your app!

Extra: ##NOW serverless deployment: only follow if you want to deploy your next project as a static build site without custom routing/logic

Note: The following deployment method will only deploy your project as a static hosted site on the NOW serverless platform. Your custom express server will not be created following this method. leaving in for reference if needed for your needs

You can host the next projects anywhere a node project can be deployed as it is just a node package. For this tutorial we will deploy to NOW, a serverless deployment provider: https://zeit.co/now

Init a git project and commit your files:

1cd ..
2cd frontend
3rm package-lock.json # May involve errors if not removed
4git init
5git add .
6git commit -am "Initial commit"

First, install the NOW command line:

1npm i -g now

Follow the instructions to confirm your email.

Add the following Dockerfile which will:

• Install all the dependencies
• Build the application for production
• Remove non-production dependencies
• Create a new lighter Docker image to reduce boot time
• Pull built files and production dependencies from previous steps
• Expose the port 300 and run the application

Create the Dockerfile at the root of the project:

1touch Dockerfile

Add:

1FROM mhart/alpine-node:10 as base
2WORKDIR /usr/src
3COPY package.json yarn.lock /usr/src/
4RUN yarn install
5COPY . .
6RUN yarn build && yarn --production
7
8FROM mhart/alpine-node:base-10
9WORKDIR /usr/src
10ENV NODE_ENV="production"
11COPY --from=base /usr/src .
12EXPOSE 3000
13CMD ["node", "./node_modules/.bin/next", "start"]

Then, create a now.json file at the root:

1touch now.json

Contents:

1{
2  "type": "docker",
3  "public": true,
4  "features": {
5    "cloud": "v2"
6  }
7}

Run command now for deployment

Conclusion

Huge congrats, you successfully achieved this tutorial. I hope you enjoyed it!

The source code is available on GitHub: https://github.com/ryanbelke/strapi-next.

Still hungry?

Feel free to add additional features, adapt these projects to your own needs and give your feedback in the comments section.

Share your meal!

Did you enjoy this tutorial? Share it around you!