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.
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.
- Checkout to a new branch titled 'tips_n_tricks'
$ git checkout -b tips_n_tricks
- 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.
Add branch to Netlify's deploy context: From the Netlify dashboard open the vue-cli-app-netlify site, go to
build & deploy> scroll down to
Deploy Contexts, click on
edit settingsand select
Let me add individual branches, add tips_n_tricks on the Additional branches field and click save.
tips_n_tricksbranch 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.
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.
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.