Deploying VueJS Front-end to Netlify
Arpan Kc
Posted on April 27, 2020
To preface, I'm currently working on a project whose backend API service I've recently published to heroku. So next step is to deploy my front-end.
Why Netlify?
Considering all the free options, I settled on Netlify. In addition to the Continuous deployments which let me deploy on every pull request, I also did not have to deal with any server side stuff. And unlike the Heroku free servers, Netlify (static)sites never sleep.
Deploying in 3 simple steps
Here's how I did it in 3 simple steps:
- Added a netlify.toml in the root directory which consists of:
[build]
command = "npm run build"
publish="dist"
base = "client"
Because the front-end vuejs code is inside the 'client' subdirectory, I have to specify in this .toml file that the subdirectory to use is 'client' and the directory to publish after building is ./dist.
- Added a _redirects file inside the /public directory inside client sub-directory.
/* /index.html 200
Include this file so that directly going to a different url (like
https://yoururl.netlify.app/home) won't return a '404')
- Login to netlify and add a new site from git. Then select the repository.
And voila, netlify should build and deploy the site.
Thanks for reading.
Project Repo: https://github.com/nipeshkc7/BeatingBookies
Live project: https://beatingbookies.netlify.app/
P.S. Please follow me on twitter, I'd really appreciate it. @Nipeshkc
Posted on April 27, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.