Deploying VueJS Front-end to Netlify

nipeshkc7

Arpan Kc

Posted on April 27, 2020

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"
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
nipeshkc7
Arpan Kc

Posted on April 27, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related