Deploying Vue with Netlify, from scratch
Tags: vue, netlify, javascript
Published: 2019-08-25 20:49:22


# 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](https://cli.vuejs.org/), so make sure have that installed.

```
vue create vue-sample
```

I chose the default settings and used npm as package manager. <br>After it was created you can run the sample with

```
cd vue-sample
npm run serve
```

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/3okGr7aFuAg02xxZ.png"><figcaption></figcaption>

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

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/3A4kkOjaHA9sMOgf.png"><figcaption>Add a new site in Netlify</figcaption>

Choose your repo, then continue to the main settings:

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/NqxLcDScQqG4FXcn.png"><figcaption></figcaption>

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
```

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/E5AnwgzOm7QkXMMT.png"><figcaption>Choose history mode to have nice looking urls such as /about</figcaption>

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:

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/L6pgmEQ3yg3jt7i7.png"><figcaption>/about</figcaption>

If you refresh the page directly though you currently get an 404.

<img src="https://res.cloudinary.com/ximg/image/upload/w_732,h_500,c_limit/f_auto/whoami/4a595384/post/holDRfP5HlJFpCUW.png"><figcaption>/about if you go there directly</figcaption>

To fix we need to setup [custom rewrite rule](https://www.netlify.com/docs/redirects/#rewrites-and-proxying). 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!

<small>Originally posted at https://loftie.com/post/deploying-vue-with-netlify-from-scratch</small>