Heroku is one of the tools used by developers to deploy, manage, and scale modern apps. You can choose Heroku as your host, because this is free and easy to use as deploy. There are lot of articles to deploy Vue JS application on Heroku. But some of articles are giving me an errors. The first time I was to ever host a Vue app on Heroku and it gave lot of errors. Let me show you some points that I got with that errors.
Okay, then lets start deploying your Vue JS app to Heroku. There are some steps you need to follow.
Before get into deploy you need some basic requirements.
- Install Node – If you not installed node yet. click here to install. This is very easy. download and install it.
- Basic knowledge of npm and git commands
1. Create your Vue JS Project
If you have already create your vue JS project skip this step. This step is for beginners who try to learn vueJS.
First you have to install Vue CLI. If you are not instaled Vue CLI, you have to install it first. click here to install. The you can create a project by calling ,
Then follow the steps that is come from Vue CLI. After you create the Vue App, you need to install some npm packages before deploy.
2. Create Node server and Configurations
Change your Package.json file first. in the Script command you need to replace this below code.
After that you have to create a server.js file in your root folder. It means in your “cd YOUR_PROJECT_NAME” folder. then paste this below code inside the server file.
Just don’t care about the dist folder called in the server.js file. It will automatically build when we are building the vue App. So lets build your Vue JS App. To do that, you can type below command.
Now you can see a dist folder in your root folder. You can check your application successfully build or not, using “node server.js” command. or “npm start“. and use “localhost:8080” to preview.
3. Create a git repository and push the code
Create a git repository on GitHub and push your files to that repo. Below I provide some commands to push your codes.
4. Heroku create – lets deploy on heroku your Vue JS app
If you are a new user, first of all you have to create Heroku account. To do that you can use this link – https://signup.heroku.com/login.
Then get you terminal or a command prompt in your root folder. then run this below command.
Then it will asked about to press any key to open with web browser to identify your login as oAuth. After you login successfully, you can run this below command.
After that you need to run this command.
The following “frightening-werewolf-01134” code came from the above “heroku create” command. You can see the that code the above image in purple color.
After that you can push your code to heroku repository.
5. Run your Application
Then Heroku will automatically deploy your app to their serve. After that you can see a link like this.
You can open this link on your web browser or you can run command,
Thank you for reading. If you are interesting on my article, make sure to follow my other articles as well. Make sure to leave a comment.
- Android Studio Articles – https://builditmasters.com/category/android-studio/
- Android Studio Firebase Tutorial – https://builditmasters.com/category/android-studio-firebase-tutorial/
- C Programming – https://builditmasters.com/category/programming/
- Flutter – https://builditmasters.com/category/flutter/
- GitHub Tutorials – https://builditmasters.com/category/github/
- Java Programming – https://builditmasters.com/category/java-programming/
- MERN / MEVN Stacks – https://builditmasters.com/category/mern_mevn_stacks/
- Tech News – https://builditmasters.com/category/tech-news/
- Theory Lessons – https://builditmasters.com/category/theory-lessons/
- Adobe Tutorials – https://builditmasters.com/category/adobe-tutorials/
- Best Website for Programming – https://builditmasters.com/category/best-website-for-programming/
- Different Programming Styles – https://builditmasters.com/category/different-programming-styles/
- Earn Money – https://builditmasters.com/category/earn-money/
- Social Word – https://builditmasters.com/category/social-world/