Vue CLI Apps on Netlify Tips and Tricks
Tags: netlify, vue, webdev
Published: 2021-01-10 18:37:34

---
title: Vue CLI Apps on Netlify Tips and Tricks
published: true
description: Important Tips and Tricks when Deploying Vue Cli Apps on Netlify.
tags: netlify, vue, webdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/9wmpsvruwtpa9hxls7b8.jpg
series: Vue CLI Apps and Netlify
canonical_url: https://jamesinkala.com/blog/vue-cli-apps-on-netlify-tips-and-tricks/
---

After **[deploying our vue-cli app on Netlify](https://dev.to/xinnks/deploy-vue-cli-apps-on-netlify-2de7)**, on this tutorial we'll cover a couple of Netlify's tips and tricks.

## Branch Deployment ##
When the need arises to deploy your development branches, especially when you want to see how new added features work before merging them to your production branch, Netlify helps with that by providing the branch deployment feature. To demonstrate this, we'll add a new branch and make some changes to the app.

1) **Checkout to a new branch titled 'tips_n_tricks'**
```sh
$ git checkout -b tips_n_tricks
```
  
2) **Add the vue router plugin to the vue-cli app**
```sh
$ vue add router
```
After the plugin has been added, two views will be added to our app inside the `src/views` directory, the Home and About views. Also the routes to these two views will have been configured and the router attached to the app. Go ahead and commit these new changes and preview the app locally if everything works.
  
3) **Add branch to Netlify's deploy context:** From the Netlify dashboard open the vue-cli-app-netlify site, go to `site settings` > `build & deploy` > scroll down to `Deploy Contexts`, click on `edit settings` and select `Let me add individual branches`, add *tips_n_tricks* on the _Additional branches_ field and click save.
![Adding a new branch to Netlify's deploy context](https://dev-to-uploads.s3.amazonaws.com/i/z6rhgmcn0gs5t8ruw5mv.gif)
  
4) Push the `tips_n_tricks` branch to your remote repo. When you open the deploys page on the Netlify dashboard you'll see the branch deploying. Open the resulting link to see the changes per the new branch. Normally the link is in this format 'https://*RANDOM_CHARACTERS*--vue-cli-app-netlify.netlify.app', you can replace the *RANDOM_CHARACTERS* with the name of the branch to see the deployed branch.
  
## Direct Routes ##
When you try accessing any route apart from the home route you will only land on the default Netlify error page.
![Error when accessing a route directly on the browser](https://dev-to-uploads.s3.amazonaws.com/i/063hftysk6ssj3z2jb53.gif)

To fix this, add a file inside the public folder, name it '_redirects' without any extension and add the following code inside it.
```
/* /index.html 200
```

Stage, commit and push the changes. When the new commit has been deployed on Netlify you'll be able to access routes directly.  
  
## Settings File ##
In addition to using the Netlify UI to configure build settings, deploy setting, and environment variables(which we'll be covered in the next post of this series), you can also configure these settings in a netlify.toml file stored in the root of your site repository.
The following configuration covers all that has been set above.
  
```toml
# Settings in the [build] context are global and are applied to all contexts
# unless otherwise overridden by more specific contexts.
[build]
 publish = "dist/"

 # Production context: all deploys from the Production branch set in your site’s
 # deploy contexts will inherit these settings.
 [context.production]
  publish = "dist/"
  command = "npm run build"

 # Branch Deploy context: all deploys that are not from a pull/merge request or
 # from the Production branch will inherit these settings.
 [context.branch-deploy]
 command = "echo branch"

 # The following redirect is intended for use with most SPAs that handle
 # routing internally.
 [[redirects]]
  from = "/*"
  to = "/index.html"
  status = 200
```
  
Stage, commit and push these changes and when you visit the link formed after the commit has been deployed, you will not notice any changes. To see the settings file at work, try deleting the `_redirects` file and push the new commit. You will still be able to visit links to the site directly without any issue as the redirects setting inside the `netlify.toml` file will be handling the route redirections just as the `_redirects` file does.