Deploying Vue with Netlify, from scratch
Netlify is a great platform for vue apps. You can simply do a git push, and they will automatically build and deploy it for you. They also have a great free tier available.
Deploying Vue on Netlify is mostly straightforward:
1: Create the Vue app
For this example I’m going to use Vue CLI, so make sure have that installed.
vue create vue-sample
I chose the default settings and used npm as package manager.
After it was created you can run the sample with
cd vue-sample
npm run serve
2: Connect with Netlify
Netlify can deploy from Github, Bitbucket or GitLab, so push your code to one of those. Then its time to create a new site with Netlify:
Choose your repo, then continue to the main settings:
The build command is what Netify will run after code is pushed. npm run build will put the generate files under the dist/ folder, so we tell Netlify to publish that directory.
At this point your site will be live, and even better a new version will automatically be deployed every time to push to master! There are some last steps though to get everything working.
3: Setup redirect rules
While the homepage works nicely, at the moment going directly to any inner page will result in a 404. To fix this lets first create a route to see the issue:
vue add router
Commit and push these changes to master, and Netlify will deploy the new version automatically. You should see an About link at the top of your site:
If you refresh the page directly though you currently get an 404.
To fix we need to setup custom rewrite rule. Create a file named _redirects under the public/ folder with the following contents:
/* /index.html 200
This will effectively serve the index.html for any route under your site. Putting it in the public/directory means it will end up in dist/ after npm run build, which is what we want.
Now push this to master and you are done!
Originally posted at https://loftie.com/post/deploying-vue-with-netlify-from-scratch
Top comments (0)