This post is the third in a series and was originally published on Dev.to.
FYI, I’m using a Mac, so there may be some Mac-specific commands.
Alright, part 3, deploying is the fun part. That’s when your site actually ends up on the internet. Like... people can visit it and stuff. It’s not just a project on your computer anymore. So let’s get into it..
Initialize Firebase on your site and deploy to Firebase
- Login to Firebase and create a project for you site. Make an account if you don’t already have one.
- Click Go to Console
- Click the Add Project tile
- Give your project a name and click Continue
- Enable Google Analytics for your site (or not, your choice) and click Continue
- Select your Google Analytics location, configure your Google Analytics settings, accept both terms checkboxes, and click Create Project
- Install the Firebase CLI and initialize your site’s directory
- In terminal,
npm install -g firebase-tools
firebase logout(you may not have to do this step, but I did)
- Type ‘y’ to let Firebase collect usage and error reporting info. Type ‘n’ not to (I go with ‘n’) and press Enter
- This will open up a Google sign-in page
- Select your Google account that you use for Firebase
- You will be asked to authorize Firebase CLI to access your Google account. Click the Allow button.
- You should get a login successful screen (you can close this window)
- In Terminal, the output should be something like
✔ Success! Logged in as [your.email]@gmail.com
cdto your site’s root directory
- Press the down arrow until the “Hosting: …” option is highlighted, press the space bar to select it, and press Enter
- Use the up and down arrows to highlight “Use an existing project” and press Enter
- Select the Firebase project you created previously and press Enter
- For public directory, type ‘public’ and press Enter
- For whether to configure as a single-page app, type ‘n’ and press Enter
- If asked to overwrite anything, type ‘n’ and press Enter
- Your terminal output should be:
- In terminal,
1i Skipping write of public/index.html23i Writing configuration info to firebase.json...4i Writing project information to .firebaserc...56✔ Firebase initialization complete!
- Commit your changes to your repo
git add --all
git commit -a -m "Initialized Firebase"
git push -u origin main
That’s right we committed right to main. Didn’t fork and do a PR. You don’t have to. I usually do, but didn’t this time. It’s a good habit to fork and PR though.
- Deploy your site to Firebase (when your site is ready to deploy)
firebase deploy --only hosting
- Your terminal output should be like the following…
1=== Deploying to 'thtmnisamnstr'...23i deploying hosting4i hosting[thtmnisamnstr]: beginning deploy...5i hosting[thtmnisamnstr]: found 135 files in public6✔ hosting[thtmnisamnstr]: file upload complete7i hosting[thtmnisamnstr]: finalizing version...8✔ hosting[thtmnisamnstr]: version finalized9i hosting[thtmnisamnstr]: releasing new version...10✔ hosting[thtmnisamnstr]: release complete1112✔ Deploy complete!1314Project Console: https://console.firebase.google.com/project/thtmnisamnstr/overview15Hosting URL: https://thtmnisamnstr.web.app
Boom! You’re site is deployed to Firebase. You should be able to go to the Hosting URL in your most recent terminal output to see your site. I already had my Firebase configured for thatmanisamnstr.com. So when I go there, it’s up.
That’s it for today. I’ll post a tutorial next week on how to automate deployments with GitHub Actions. That was supposed to be part of this post, but I’ve been crazy busy at work (I ran go-to-market for open sourcing our instrumentation, and I ended up doing a bunch of work for our recent launch. Our new free tier is dope btw.).