Host Angular App for Free?

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

Hosting a Project can be sometimes a headache. You may be developing a project on a low scale or just for personal use or maybe just for the sake of practice, and testing. At that time you don’t need to buy a domain, and host your website on some big web hosting provider. you can simply host your web app on Firebase, Github, Heroku.

Building Your angular project

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

Enable Production Mode

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

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

#localhost

One 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 about my code.

For doing this, you first need to build your angular code by ng serve --prod. You can use --base-href tag with this command to assign a base address for your code, or you probably have already assigned it in index.html to '/'.

If you didn’t get any errors then feel grateful, your build would have 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 not, then you can install it by command npm i http-server. After the installation is finished you can manually navigate to your build directory, and use command http-server ./ which will run your build files on the default port 8080, use 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. First, use ng build --prod to make a dist file for your angular project.

2. Install firebase-CLI by using npm install -g 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 forward you to the login page, you’ll get the link for the same in the terminal also. then just Login in your google account.

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

5. 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 key. you can select other services also, if you’re using them, or going to use them in the future.

6. Then firebase-CLI will ask you to select the project name, that you created in step 4.

7. The CLI will ask you What do you want to use as your public directory? , here you need to provide the folder for your angular build files, in my case it is, dist/firebase-host.

8. just type firebase deploy to deploy your project.

9. firebase-CLI will provide links for your firebase-console and currently deployed web app.

#GitHub

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

Follow us on Twitter 🐦 and Facebook 👥 and join our Facebook Group 💬.

To join our community Slack 🗣️ and read our weekly Faun topics 🗞️, click here⬇

If this post was helpful, please click the clap 👏 button below a few times to show your support for the author! ⬇