Build a simple SPA VueJS on Netlify

1. Build a simple SPA with Vue App.

Recently, there are many great frontend frameworks like React, Angular, and Vuejs, each framework has pro and con but for a simple app demo, I would like to pick up Vuejs because it is easy for learning. Thanks for cli3, now build and deploy a simple Vue app is easier just some small steps.

• install cli 3

In this step, I suppose that you have installed npm or yarn.

npm install -g @vue/cli
# OR
yarn global add @vue/cli

• create a simple vuejs app

vue create hello-world

• build and run the app on the local

npm install 
npm run serve

For more features of cli3, you can check this link

• create a repository on github and push code to master

2. Deploy app on Netlify.

Netlify is a great host for personal blog, startup product because it doesn't require any credit card information even you can customize domain as your name. Before I like Heroku because it is also easy but in Heroku, your application is not live if there are no requests and the first request is always take a long time to up the app. And the most thing I like Netlify because it is very easy to deploy with several steps. Okay, now we start to deploy the application.

• Create an account on Netlify, you can very simple to use github account for Netlify.
• Connect to Github account

New site from git

• Selecting Github app which you want to build, enter commands

History Mode

To config history mode, when you refresh the app by on the enter then link, you will get the issue no page found.

To fix we need to set up a custom rewrite rule. Create a file named _redirectsunder the public/ and added this line to file.

/*    /index.html   200

This will effectively serve the index.html for any route under your site. For nginx server, you need to config file, it is similar but you don't need to care in this case.

Now push this to master and you are done!

3. View the app

During Netlify build the app, you can check the log and progress, click to production deploys to see the logs

Now every time when you push the code to GitHub with the master branch. Netlify will automatically deploy your application.

Waiting for some seconds, you will see the app link. it is so easy, you have almost finished deploy the app on Netlify, now you can customize the domain. Click to Domain Settings and change as your name you want.

4. Try a practical case

after finished deploy the simple app on Netlify. i try other app which is developed by vuetify team, you can check source code from Github. Now I will deploy this app to Netlify.

In my case, I have modified a little code but it is still easy, for improving and customizing, you can start learning with vuejs.

Vo Thanh Tung

Next: Customize simple vue app with Vue route, vuetify.