This is the Heroku configuration I did for my Vue + ExpressJS app.
1. First and foremost, make sure you have installed your Node, initialized NPM and Git in your project.
2. Create Heroku account. Afterwards, go to your Terminal and run :
3. Run the following command to create your Heroku app :
heroku create <name of your app>
if my app is called “Vue-Poster”, then I should run
heroku create Vue-Poster
4. Stage every file in the project, by running :
git add .
5. Commit the staged code, the message can be anything relevant to the commit action, like so :
git commit -am "Deploy to Heroku"
6. Push it to Heroku by running the following command :
git push heroku master
Then, something like this will appear which shows what just went committed and pushed to Heroku. Your screen might produce a completely different data, because this is specific to your git commit activities.
7. The application is now deployed. Ensure that at least one instance of the app is running:
heroku ps:scale web=1
8. Now visit the app at the URL generated by its app name. As a handy shortcut, you can open the website as follows:
Wait, still not showing anything? If you used an API to retrieve data that requires authorization, make sure to check that Heroku is configured correctly.
In my case, where I used Imgur API, I had to run this
heroku config:set IMGUR_CLIENT_ID=9a058blablae18
Another thing to add is adding a Procfile (literally just a file without any extension that is saved as ‘Procfile’). In my case, it has this configuration :
web: node index.js
This declares a single process type, web, and the command needed to run it. The name web is important here. It declares that this process type will be attached to the HTTP routing stack of Heroku, and receive web traffic when deployed.
That is all, folks.
PS. Check the Vue app that I deployed to Heroku here.