Heroku is an amazing hosting platform when you want to quickly share your latest projects or learnings with others.
However, after completing a couple of tutorials aimed at increasing my knowledge of building single page web apps with vue.js, I hit a wall when it came time to deploy. Most Google findings were geared towards deploying vue.js apps with webpack and I needed something more simple. Here’s what I found and I hope it saves someone else days of searching.
Set up
- You need git
- Set up Heroku Account
- Download the Heroku CLI
- Run heroku login in your terminal
Deploy to Heroku
cd into your project directory
With your editor of choice, create an index.php file and inclue this line of code:
<?php header( 'Location: /index.html' ) ; ?>
This brilliant method makes the browser redirect from index.php to index.html thus tricking Heroku into deploying your single page web app without the use of NodeJS buildpack.
Version Control
Next initialise your git repo:
git init
git add .
git commit -m 'Put your message here'
Create your app site on Heroku with the following command:
heroku apps:create vuejs-app
of course change vuejs-app to your name of choice.
Now the moment we’ve been waiting for. Push the code to Heroku:
git push heroku master
In the terminal you should see the build process and if all goes well, you should be greeted with:
‘remote: Verifying deploy…. done.’
Finally a link to your app is provided so you can view your work.
Enjoy!