🍝 Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe - 🚀 Bonus: deploy - part 7/7)

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: https://github.com/strapi/strapi-examples/tree/master/nextjs-react-strapi-deliveroo-clone-tutorial*.

🚀 Bonus: deploy

At this point, we only need to deploy our API and our web app.
Strpi can be hosted on any major provider offering node deployments (AWS, Heroku, DO). Read further about deployment of Strapi here:
https://strapi.io/documentation/3.x.x/guides/deployment.html

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 your 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: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 are automatically wiped periodically.

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

Strapi Docs: https://strapi.io/documentation/3.x.x/guides/upload.html#examples

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

cd backend
npm 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:

Thats all it takes to enable S3 file uploads with Strapi!

---

Backend

Init a git project and commit your files:

cd backend
rm package-lock.json # May involved errors if not removed
git init
git add .
git commit -am "Initial commit"

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

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

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

Login to Heroku, navigate you 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 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 to match:

packages.json

  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js -p $PORT",
    "heroku-postbuild": "next build"
  }

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.

process.env.PORT || 3000

Full server.js file:

Now create the git repo for the frontend:

Init a git project and commit your files:

cd ..
cd frontend
rm package-lock.json # May involved errors if not removed
git init
git add .
git commit -am "Initial commit"

Then deploy to Heroku:

heroku create
git 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 next projects anywhere a node project can be deployed as it is just a node pacakage. For this tutorial we will deploy to NOW, a serverless deployment provider:
https://zeit.co/now

Init a git project and commit your files:

cd ..
cd frontend
rm package-lock.json # May involved errors if not removed
git init
git add .
git commit -am "Initial commit"

First install the NOW command line:

npm 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:

touch Dockerfile

Add:

FROM mhart/alpine-node:10 as base
WORKDIR /usr/src
COPY package.json yarn.lock /usr/src/
RUN yarn install
COPY . .
RUN yarn build && yarn --production

FROM mhart/alpine-node:base-10
WORKDIR /usr/src
ENV NODE_ENV="production"
COPY --from=base /usr/src .
EXPOSE 3000
CMD ["node", "./node_modules/.bin/next", "start"]

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

touch now.json

Contents:

{
  "type": "docker",
  "public": true,
  "features": {
    "cloud": "v2"
  }
}

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 this projects to your own needs and give your feedback in the comments section.

Share your meal!

You enjoyed this tutorial? Share it around you!

Comments

[Antonio M Ferreira]

Thank you!

This tutorial is very good. Unfortunately, Strep is not available in Brazil yet. But I will try to implement (Bank slip) a very common means of payment here.

Congratulations for the initiative.