Are you new to front-end web development, and you seek tools to help you to become more productive, I am going to be showing you how to deploy your frontend applications with Surge.
One single pain attached to front-end frameworks is the ability to go live with them, as so many configurations are usually attached to them.
In this tutorial, I am going to be showing you how to deploy your Vue js app with Surge build tool.
What Is Vue Js ?.
Vue js is a single page application framework that allows frontend developers to quickly develop working web applications.
Vue js was created by ex-Google Developer, Evan You and since then it has become very popular enough to stand alongside established frontend framework like React Js, Angular JS.
What Is Surge.
How To Get started With Surge.
Surge is a complete CLI tool, so you don't have to worry about any interaction with a hosted website, and this is one reason why I prefer it to Netlify and other JS build tools.
Getting started with Surge is very easy, all you are ever going to need is.
1. A PC (Windows, Mac, Ubuntu).
2. Node Js installation.
3. An active or a new Vue js project.
Deploying Our Project To Surge.
We need to configure surge in a way that it identifies our project and deploys it whenever we want to, remember that surge is a complete CLI Tool, and you don’t have to interact with a web user interface.
1. Install Surge CLI Globally on your System.
Depending on what OS, you are using, you would be asked to install surge scripts globally on your computer.
2. Set up your ID, Email and Password.
upon installing Surge for the first time, you would be asked to set up an Id with a valid email and password.
I had to skip this step because I have configured surge on my local system.
The final stage involves a little tweak, don’t rejoice yet, your project is not live yet, you still have some in house stuff to do.
Now, while in your project root directory,
- run npm run build.
2. navigate to the dist folder by running cd dist.
3. Rename the index.html to 200.html
3. Run the surge command.
4. Pick a subdomain name, Surge would give you a default subdomain but you are free to change it, but make sure that you include surge.sh and that settles it, your project is live.
5. Any time you make any changes repeat the steps from 1- 4 here again but make sure that when entering the subdomain, you choose the previously choosing subdomain name.
With my very few years of experience with single-page applications, one thing I have found very difficult to do was going live anytime I finished developing my apps locally on my machine.
Surge.sh has helped me to do a lot very quickly with my frontend project, try surge now today.