Deploying VueJS Front-end to Netlify

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