Hosting Angularjs2 App using surge - the easy way

NOTE: This method is not only for angular2 based projects. You can use it for hosting any website with index.html(because by default index.html is the first file which is executed on server).

Yesterday i was looking about different methods to host a angular app. Found a lot of solutions like heroku, gihtub pages etc. but there was one method which i liked the most that is using Surge.
You just need to enter one command and taadaa !!...your website is live with a free doain name (example.surge.sh). I have used to produce for the production based app but i used it for testing a website front-end. It was simple and easy.

 For more information about surge: https://surge.sh

Downloads and installations required:
These are one time things once they are done you will be able to host your website with a single click.

1. Download Nodejs (pref. v6.x)
Dont worry about this, you need not know anything in nodejs. we just need it for installing different packages and it also comes with a local server(like that xampp).

2. Install/upgrade npm(node package manager)
open your cmd window and execute this command
 npm install npm@latest -g

if you want to know more about npm check this: https://docs.npmjs.com/getting-started/what-is-npm

3. Install Surge
again open your command prompt and execute this command
npm instal -g surge

Hosting your webage(front-end):

For people who want to host the angular2 app first need to create the build code for your project by running this command: ng build
This will create a dist folder in your project which will be having the index.html file.(now the other steps are same for everyone) You will be running the surge command from this folder.



1. open your project directory were you are having the index.html page.
2. open cmd from this folder( inside the directory click shift+right click there you will see an option open command prompt here).
3. run this command :- surge 


4. enter your email id and password(if you are doing this for the first time your email and password will be used as signup credentials for surge).
5. choose the domain of your choice.
6. Yahooo..Your webpage is no live!!


For adding your sutom domain you can follow this doc: https://surge.sh/help/adding-a-custom-domain

for any queries feel free to leave a comment.









Comments

Post a Comment

Popular Posts

Why to choose C# ? - for Beginners

Image
Hello Everyone, in my last blog " Cross Platform development " I promised(kind of) to tell you "why to choose C# ?". So here we are ;-) ,  lets start exploring interesting features of  C#. DIFFERENCE BETWEEN C# and VISUAL C# When you program with C# in Visual Studio IDE it is then called Visual C# Visual C# is just the marketing name that Microsoft uses for C#, therefor Visual C# is just C#. GENERAL INFO : Developed By : Anders Hejlsberg(Microsoft) Most recent version : C# 6.0 First Appeared : 2000 Previous name: Cool(C-like Object Oriented Language)....{C# is much better I know :-)  } FEATURES : 1. Direct memory manipulation is not allowed in C# , helps to carry out safe operation. 2. Automatic memory management(Since It is on .Net). 3. It has a built in suport to turn any component into web service that can be accesed over the internet. 4. It supports Polymorphism,Interfaces, Data Encapsulation. 5. In C# we can dir...
Read more

NOT SO COMMON C++ : Access Specifiers

Image
Hello everyone , wecome to our NOT So Common C++ series. In the last post for NOT SO COMMON C++ we discussed about some shortcuts , initializations of pointers, structures ..etc. So today lets cover some tricky portions of C++ that are a bit confusing for the beginners. I hope you people have basic knowledge of class in C++.  Access Specifiers : public , private , protected. Lets see an example to get an overview of access specifiers- #include<iostream> using namespace std; class Example { private :     int priV ;                              // PRIVATE VARIABLE or PRIVATE MEMBER public :      Example()                           //Constructor      {             priV =  10;                 ...
Read more

Li-Fi - Experience The Lightning Speed

Image
LiFi - Light Fedility   Ever wondered what's worse than No Internet ?................. slow internet...right. In the last decade we have seen different ways in which we connect to internet. But ever thought of connecting to the internet at a wooping speed of 10Gbps in your house, neighborhood or at your office ?... it was only made possible by the Li-Fi technology which promises to bring 10Gbps connection speed to you. Li-Fi is still very much in its developing stage but it is already making alot of noise in the tech market. According to many experts the Li-Fi industry will touch $113bn by 2022 and may surpass our dear friend "The Wi-Fi". According to the reports Li-Fi is 100 times faster than Wi-Fi. In 2014 Sisoft(mexican company) was able to transfer data at a speed of 10Gbps using light lamps i.e using lightning spectrum.  How it Works?   In Li-Fi the data is transmitted by modulating the intensity of light coming out of the LED buld(when curre...
Read more