Deploy Angular App - aakash14goplani/FullStack GitHub Wiki

Topics Covered:
Firebase
GitHub

Firebase

  1. Run ng build --prod and this builds the entire Angular application for production, optimizes everything and gives you an output which you can deploy onto a static server.

    • It compiles your TypeScript code to JavaScript, it also compiles all your templates to JavaScript instructions so that in the end, only JavaScript code is generated that runs in the browser and contains all the logic for updating the DOM in the way you defined it in your multiple components and all the logic you added in your application.
    • Now after running ng build --prod, you get dist folder and in there, you have a folder of your project name and in that project name folder.

  2. You need the Firebase CLI for that which simply is a tool you have to install to automatically deploy your Firebase application. For that, you need to install the Firebase CLI first, for which you need NodeJS and NPM and then run this command npm install -g firebase-tools

  3. So with that all run, you next have to run firebase login, to log into your Firebase account.

  4. Next step then is to run firebase init to connect this project here with one of your Firebase projects and for that, you now should be in your Angular project folder, so cd into it.

    • Firebase init now asks you what you want to use,
      • which Firebase feature you want to use: hosting, so tick hosting here by hitting space next to it and then hit enter
      • choose a project to which you want to connect: simply choose the project you created e.g. angular-basics
      • what your public directory is: that's in a dist/<project-name> folder e.g. dist/angular-basics
      • whether you want to configure this as a single page app: y, to ensure that all requests that you sent to that back-end are always redirected to index.html, you need to have a server configured such that it always serves the index.html, no matter which URL you entered into the browser and the reason for that is that by default, the server always handles an incoming request first and if it's a URL that's unknown to the server, you would normally get an error. Of course we have the Angular router handling our different routes but that, always keep in mind, runs on the client, so in the browser and that only gets a chance to run if the server serves your app. So any requests have to reach the server first, there they are all redirected to index.html, which in the end is our starting point for the single page application and since any request, no matter which URL you entered reaches that page, that HTML page, now the Angular app can take over for any incoming request with any URL on your server and can then use the Angular router to load the correct content in your Angular app, that's why this redirection is important
      • the existing HTML file should not be overwritten: NO

  5. Run firebase deploy and this will now deploy the content of this folder onto Firebase.

URL: https://angular-practice-166c4.firebaseapp.com/
Reference

GitHub

  1. ng build --prod --base-href https://USERNAME.github.io/REPOSITORY_NAME/ --output-path docs

  2. git add docs/*

  3. git commit -m "some_message"

  4. git push

  5. Login to GitHub > Repository > Settings > Publish GitHub Pages > branch: master branch/docs folder

  6. Install Git pages package: npm i angular-cli-ghpages --save-dev

  7. npx ngh --dir=dist/[PROJECT-NAME]

Note When deploying for first time, follow all steps and then on later deployments follow step 1 - 4 only.

URL: https://aakash14goplani.github.io/AngularPractice/
Reference

Method 2

ng add angular-cli-ghpages
ng deploy --base-href=https://aakash14goplani.github.io/angular-isite/
  • In case of errors, run ngh --no-silent.
  • Also your username and email of Git should be configured