Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe - πŸš€ Bonus: deploy - part 7/7)

This tutorial is part of the Β« Cooking a Deliveroo clone with Nuxt (Vue.js), GraphQL, Strapi and Stripe Β»:

Note: the source code is available on GitHub: https://github.com/strapi/strapi-tutorials/tree/master/tutorials/deliveroo-clone-nuxt-strapi-tutorial.

Deploy Backend on Heroku

Init a git project and commit your files:

cd backend

rm package-lock.json # May involve errors if not removed  
# OR
rm yarn.lock

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  

Heroku deploy

Visit the URLΒ provided by Heroku and keep it for the next step.

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

Deploy Frontend on Netlify

Init a git project and commit your files:

cd frontend  
git init  
git add .  
git commit -am "Initial commit"  
git remote add origin https://github.com/<you>/<your-project>.git  
git push -u origin master  

Then:

  • Signup to Netlify.
  • Create a new site.
  • Select your repository.
  • Add the build command: npm run generate.
  • Add the publish directory: dist.
  • Add the Strapi API URL as environment variable: API_URL with the value of the Heroku project url.
  • Add the Graphql URL as environment variable: GRAPHQL_URL with the value of the Heroku project graphql url.

Netlify setup

Conclusion

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

The source code is available on GitHub: https://github.com/strapi/strapi-examples/tree/master/nuxt-strapi-deliveroo-clone-tutorial.

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!