DEV Community

Cover image for Firebase Project Hosting
Alex Patterson for CodingCatDev

Posted on • Originally published at ajonp.com on

Firebase Project Hosting

Original Post: https://ajonp.com/lessons/firebase-project-hosting/

Firebase Console

Go to the Firebase Console

If this is your first firebase project you will need to Sign in to Google

Google Login

Create Project

Now you can click the button to add a new Project

Create Project

Hosting

At this point many if the blogs will start talking about setting up the database, but I want to keep this really simple "Hello World" style.

You can now navigate over to the hosting area within firebase.

Firebase Hosting

If you take a look at Firebase hosting quickstart it also has a great guide.

If you are all new to programming you may not have installed Node or NPM yet, just follow this link and install the LTS version.
NodeJs with NPM

Hosting Deploy

Now you can select "Get started" to walkthrough the guided tips from Firebase - Hosting.
Hosting Get Started

Install Firebase Tools

npm install -g firebase-tools
Enter fullscreen mode Exit fullscreen mode

Login with firebase

firebase login
Enter fullscreen mode Exit fullscreen mode

Make a new directory

mkdir ~/Downloads/lesson-1-firebase-project
cd ~/Downloads/lesson-1-firebase-project

Enter fullscreen mode Exit fullscreen mode

Initialize firebase

firebase init
Enter fullscreen mode Exit fullscreen mode

Selections

  1. Up/Down key to move to Hosting
  2. Hit spacebar to make selection
  3. Enter to continue to next setup
  4. Navigate to your newly created firebase project
  5. Hit enter to accept public as location to serve files
  6. Key n, Enter for not making this a single page app.
  7. Firebase initialization complete!

Firebase project file

.firebaserc

{
  "projects": {
    "default": "ajonp-lesson-1"
  }
}
Enter fullscreen mode Exit fullscreen mode

Firebase hosting file

firebase.json

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ]
  }
}
Enter fullscreen mode Exit fullscreen mode

Deploy firebase

Because you are logged into the CLI, the two files above tell firebase the project to use, and how they will be served on nginx.
Now you just need to run the deploy command.

firebase deploy
Enter fullscreen mode Exit fullscreen mode

Now back inside the firebase console you should see that hosting has now been completed.
Firebase Hosting Files

Top comments (0)