Full Stack Vue.js, Express & MongoDB [3] - Prepare & Deploy

In this video we will prepare our app with a proxy and special build location config. Then we will deploy our app to Heroku using the Heroku CLI and Git

Code:

💖 Become a Patron: Show support & get perks!

Website & Udemy Courses

Follow Traversy Media:

[splendorman]

I'm gonna be honest, this is one of the best simple tutorial I've ever seen on this particular topic. straight to the point without unnecessary information. it would be so great if you can do something similar for vue3 and/or with firebase.

[DeanMcCoy]

I've been curious about the MEVN stack for a while. This is a great intro to get started. Thanks again!

[bobdpa]

Thank you Brad. I originally watched this video years ago, but after years of using cloud functions and nuxt and not getting quite what I needed, this is really the best of both worlds.

[LumbreraEnMiCamino]

amazin tutorial! Thanks a lot, i hope you can create a deep tutorial about this MVEN but with login, users, roles, etc. !!

[hectobit]

Great tutorial man, really helpful. The only thing I wouldn't recommend is checking in your compiled client app. That should be built in the server. Otherwise your git history becomes a complete mess and your repo become huge at some point.


I ended up adding a heroku-postbuild script to my server package.json with 'NODE_ENV=development yarn --cwd client install && yarn --cwd client build'. A bit hacky but it works.


Checking in build artifacts is easy but also bad practice because it creates a lot of problems.

[Sapphiamur]

Thank you so much, everything was perfectly clear and I learned a lot from it!

[perspectivescritiques]

WOW this is the best tutorial i've ever seen about how to build a MEVN app !
so complete and relevant. You taught me how to build full a stack app. Thank you very much !!

[u_dg]

Thank you so much Brad for all your videos. It really helps. I promise to support you as soon as I get this opportunity

[TheCodePro]

Hey Brad! Congrats on half a million subscribers. Looking forward to seeing 1M next to Traversy Media. Good luck!

[alanthinks]

Thank you so much for all your hard work Brad! trust me it doesn't go unnoticed, I really really can't wait to go through this new series and one day be able to pay you back in kind. Thank you!

[tomosterlund]

This is so great! I always pictured that the configuration of these types of apps was something big and tricky. You made it so easy 💪 I'm very grateful for you Brad!

[AlwayzJarvin]

Thank you very much for these short but very useful 3 videos!

[andrademurilo]

What an amazing tutorial series!!! I'm studying nodejs since last weekend and your videos helped me a lot on understanding the communication between client side and server side.

[alexveeuk]

This is really good tutorial when dealing with any stack that involves Vue as I’m using this to load my application using Golang gRPC with gRPC web with Vue utilising docker! Highly informative even now! Thanks bru!

[mysterOrel]

It's 2020
CoronaVirus sucks
But here i'm deploying my first litle app !! Thank's Brad 👌👌👌

[LucXX]

13:41 if you get here an error saying something with buildpack missing, use before "heroku buildpacks:set heroku/nodejs" for setting a nodejs buildpack.
if you're on a different branch (not master/main) be sure you push heroku on that branch, so use then: "git push heroku <your-branch>:main"

[jeffkarr]

Thanks Brad for this excellent tutorial ! Learning how to put it all together was just what I needed ! So eager to develop more Vue apps !

[caiofortes-szpt]

Hello! It was not mentioned in the video but to avoid problems when deploying to Heroku
Remember to add another field in the package.json file as shown in the example below:

"scripts": {
"test": "node server/index.js",
"dev": "nodemon server/index.js",
"start": "npm run dev"
}

heroku by default runs the npm start command when no value is found in the
"start" the application. And how do we initialize our client with the command "npm run dev"
There will be an error when publishing.

[jalajpratapsingh]

in vue.config.js

outputDir: path.resolve(__dirname, "../server/public"),

[claybowser]

thank you for walking me through my first full stack web application :)