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

Tutorial illustration

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-examples/tree/master/nuxt-strapi-deliveroo-clone-tutorial.

πŸš€ Bonus: deploy

At this point, we only need to deploy our API and our web app.

Backend

Init a git project and commit your files:

cd server  
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  

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.

Frontend

Init a git project and commit your files:

git init  
git add .  
git commit -am "Initial commit"  
git remote add git@github.com:username/project.git  
git push 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 API URL as environment variable: API_URL with the value of the Heroku project 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!