How To Upload Angular Website To Server

Host Angular App for Free?

Deploy your Angular project on localhost, Firebase, Github-pages for gratis

Hosting a Projection tin can exist sometimes a headache. You may be developing a projection on a low calibration or just for personal utilise or maybe merely for the sake of practice, and testing. At that fourth dimension y'all don't demand to buy a domain, and host your website on some big web hosting provider. you tin simply host your spider web app on Firebase, Github, Heroku.

Edifice Your angular project

Before building your project you must take tested it past executing the command ng serve and making it error-free.

Enable Product Fashion

Angular runs in development style by default, and then it ignores few production errors that are non important during the development of the product. for more reference visit Angular Dev vs Prod Build.

You gotta modify few files to inquire it to run your project in Production mode, that volition check the code for any production bugs, like circular dependencies, etc. edit the code in src/chief.ts to look like this

#localhost

Ane of the ways to host your app is to host it locally. I have used this method many times, to test my build, to get confident almost my lawmaking.

For doing this, yous first need to build your angular code by ng serve --prod. You lot tin can utilize --base of operations-href tag with this command to assign a base address for your code, or you probably take already assigned information technology in alphabetize.html to '/'.

If you lot didn't get whatever errors then feel grateful, your build would accept created in dist folder.

If you're using Linux, then you probably have heard of http-server that creates a local server for any folder you want. If non, and then you tin install it by command npm i http-server. Subsequently the installation is finished y'all can manually navigate to your build directory, and utilise command http-server ./ which will run your build files on the default port 8080, utilise http-server -p 1010 ./ to run your server at a different ports.

ta-da!!, now just visit localhost:8080/ to find your app locally hosted.

#Firebase

1. Get-go, use ng build --prod to make a dist file for your angular project.

2. Install firebase-CLI by using npm install -thousand firebase-tools.

3. Now you need to login in firebase-CLI, by using the command firebase login, You need to give it a few permissions, and CLI will frontward y'all to the login folio, y'all'll get the link for the same in the concluding also. then only Login in your google business relationship.

4. visit your firebase console, and create a new projection, Give it a name.

v. Use firebase init to initialize the firebase-CLI for your project, it'll list five services provided by firebase Database, Firestore, Functions, Hosting, Storage. You have to scrolling down to Hosting by down arrow key and select by space primal. you can select other services also, if you're using them, or going to use them in the future.

half-dozen. So firebase-CLI volition ask you to select the project name, that y'all created in stride four.

vii. The CLI volition enquire yous What do yous want to use as your public directory? , hither you need to provide the folder for your athwart build files, in my instance it is, dist/firebase-host.

8. just blazon firebase deploy to deploy your project.

nine. firebase-CLI will provide links for your firebase-panel and currently deployed web app.

#GitHub

You just need a github repository to host on github and make sure that you pushed the latest code.
Install github pages tool for angular by using, npm install -g angular-cli-ghpages .
Here deploying code in github pages is quite easy, Just need to make sure one matter, when yous build your lawmaking, use--base of operations-href tag. Build command here volition be ng build --prod --base of operations-href https://<username>.github.io/<reponame>/ .
Run athwart-cli-ghpages -d dist/<project-name>/ --no-silent to deploy your project. -d tag accept the location for build stored, in dist file.
This command will create a new branch gh-pages in your repository and automatically push the dist build in that branch.
Just navigate to https://<username>.github.io/<reponame>/