Activity 14: Documentation of Deploy to Firebase
Here's a step-by-step guide to deploying your Angular application to Firebase Hosting:
1. Google Account and Firebase Project:
Google Account: Ensure you have a Google Account.
Firebase Project: Create a new Firebase project in the Firebase console (https://console.firebase.google.com/).
2. Install Firebase CLI:
Open Terminal: Open your terminal or command prompt.
Install Firebase Tools: Run the following command to install the Firebase CLI globally:
3. Enable Webframeworks Experiment:
Run Command: Execute the following command to enable the
webframeworks
experiment:
4. Login to Firebase:
Open Terminal: Open your terminal or command prompt.
Run Command: Execute the following command to log in to your Firebase account:
Follow Instructions: You'll be prompted to open a browser window and authenticate with your Google Account.
5. Initialize Firebase in Your Project:
Navigate to Project Directory: Open your terminal and navigate to the root directory of your Angular project.
Run Command: Execute the following command to initialize Firebase in your project:
Select Hosting: Choose the "Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys" option.
Select Project: Select the Firebase project you created earlier.
Choose Build Output Directory: Specify the build output directory for your Angular application. This is usually
dist/your-project-name
.Configure Hosting: Firebase will create a
firebase.json
file in your project's root directory. This file contains configuration settings for Firebase Hosting.
6. Build Your Angular App:
Open Terminal: Open your terminal or command prompt and navigate to your Angular project's root directory.
Run Command: Execute the following command to build your Angular application:
Build Output: The build process will create the production-ready files in the specified output directory (e.g.,
dist/your-project-name
).
7. Deploy Your App to Firebase:
Open Terminal: Open your terminal or command prompt and navigate to your Angular project's root directory.
Run Command: Execute the following command to deploy your Angular application to Firebase Hosting:
- Deployment Process: Firebase will upload your built files to its servers and make your application accessible via a unique URL.
8. Access Your Deployed App:
- Open URL: Once the deployment is complete, Firebase will provide you with the URL of your deployed Angular application. Open this URL in your web browser to access your live application.
Congratulations! You have successfully deployed your Angular application to Firebase Hosting.
This my URL: