Vue CLI Apps on Netlify Tips and Tricks

After deploying our vue-cli app on Netlify, 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'

$ git checkout -b tips_n_tricks

2) Add the vue router plugin to the vue-cli app

$ 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.

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.

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.

# 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.