Table of contents
- Deploying Your Project on Firebase: A Step-by-Step Guide:
- 1. Install Firebase CLI First, you need to install Firebase CLI on your local machine. If you haven’t done so, follow these steps:
- 2. Initialize Firebase Project Navigate to your project directory and log into Firebase:
- 3. Build Your Project (if needed) For frameworks like Angular or React, build the project before deploying it:
- 4. Deploy to Firebase Now, it's time to deploy your website to Firebase Hosting:
- 5. View Your Website You can now access your website through the URL provided after deployment.
- 1. Install Firebase CLI First, you need to install Firebase CLI on your local machine. If you haven’t done so, follow these steps:
- 2. Initialize Firebase Project Navigate to your project directory and log into Firebase:
- 3. Build Your Project (if needed) For frameworks like Angular or React, build the project before deploying it:
- 4. Deploy to Firebase Now, it's time to deploy your website to Firebase Hosting:
- 5. View Your Website You can now access your website through the URL provided after deployment.
- Remember:
Deploying Your Project on Firebase: A Step-by-Step Guide:
1. Install Firebase CLI First, you need to install Firebase CLI on your local machine. If you haven’t done so, follow these steps:
Install Node.js if you don't have it (Firebase CLI requires Node.js): Node.js download
Once Node.js is installed, use npm to install the Firebase tools:
npm install -g firebase-tools
Verify the installation:
firebase --version
Enable:
The command firebase experiments:enable webframeworks
enables experimental support for modern web frameworks in Firebase. This feature helps with deploying popular web frameworks (like React, Vue, Angular, Svelte, etc.) to Firebase Hosting with better configuration and deployment support.
firebase experiments:enable webframeworks
2. Initialize Firebase Project Navigate to your project directory and log into Firebase:
firebase login
Next, initialize Firebase in your project folder:
firebase init
You'll be prompted to select the features you want to use. For website deployment, choose:
- Hosting: Configure files for Firebase Hosting.
Configure your project by selecting an existing Firebase project or creating a new one. When asked for the "public directory," you can set it to dist/your-project-name
(if you're using Angular) or build
(for React), or the directory containing your static files.
3. Build Your Project (if needed) For frameworks like Angular or React, build the project before deploying it:
- Angular:
ng build
4. Deploy to Firebase Now, it's time to deploy your website to Firebase Hosting:
firebase deploy
After the deployment is complete, Firebase will give you a hosting URL for your live site.
5. View Your Website You can now access your website through the URL provided after deployment.
Hosting URL: https://angular-components-a85f6.web.app
Project Console: https://console.firebase.google.com/project/angular-components-a85f6/overview
Remember:
You must have a google account and log in to Firebase .
Google Firebase is a set of cloud-based development tools that helps mobile app developers build, deploy and scale their apps.
Here’s my Firebase Account:
You must also create your Project in Firebase.