DEV Community: Omar Houmz

Host almost anything with firebase hosting

Omar Houmz — Wed, 07 Apr 2021 23:00:00 +0000

This was originally posted here: https://www.omarhoumz.com/blog/firebase-hosting/

Almost anytime you want to share a new trick or showcase something, you will need a way to host your web pages or app. Firebase Hosting can help you.

What is Firebase Hosting?

As the Firebase Hosting docs mention:

Firebase Hosting provides fast and secure hosting for your web app, static and dynamic content, and microservices.

So, whether you have some static HTML/CSS, a reactjs, vuejs, or svelte app, you can use Firebase Hosting to deploy your code to a global CDN.

How to get started?

Step 1: Install the Firebase cli, here I’m using npm (check the docs for other methods):


1npm install -g firebase-tools

Step 2: Login to your account using the Firebase cli:


1firebase login

This should redirect you to a web page to login into your account (create one if you don’t have it already). Once logged in, you should see a “Login successful” message in your terminal.

Step 3: Init a firebase project

This step involves linking your project (the code you want to deploy) to a firebase project. You can use an existing project or create a new one.

To do this, let’s run:


1firebase init hosting

The CLI will prompt us to “Use an existing project” or to “Create a new project”, among other options. For me, I’ll create a new project.


1+ .firebaserc

2+ 404.html

3+ firebase.json

After following the steps, we should have some new files. .firebaserc contains the project id. The firebase.json file has the hosting config; public folder location and other things. You will also notice a 404.html page that is created by default by Firebase (if you don’t already have one in your project).

These first three steps are identical regardless of your project type; Static HTML, reactjs, nextjs, vuejs, or svelte app, etc …

Deploying static HTML

In the case of a static HTML project, I created a project with only one index.html file here: https://github.com/omarhoumz/wr-firebase-hosting/blob/main/static-html/index.html.

You can clone it to follow along.

Step 4: Deploy

Now, we can deploy our website (our index.html in this case) to Firebase Hosting using this command:


1firebase deploy --only hosting

If the deployment is successful, you should see the URL to your newly deployed website in your terminal. It should be in this format: <project-id>.web.app. You can get your project-id in the .firebaserc file.


1{

2"projects": {

3"default": "<project-id>"

4}

5}

For me, this is the URL I ended up with wr-firebase-hosting.web.app.

Check the whole static HTML project here: github.com/omarhoumz/wr-firebase-hosting/tree/main/static-html

Create-React-App app

I created a CRA sample app here: https://github.com/omarhoumz/wr-firebase-hosting/tree/main/firebase-is-fire-cra

Step 4: build our project:

We can build our CRA app using:


1npm run build

This is will create a build folder. And this is the folder we should deploy to Firebase. But how to tell Firebase about it? Good question.

Remember the firebase.json file? We need to change the "public" key in that config file from whatever it is now to "build", like so:


1- "public": "public",

2+ "public": "build",

Step 5: Deploy

Now we are all set to deploy our CRA app to firebase.


1firebase deploy --only hosting

And again, if the deployment is successful, you should see the URL to your newly deployed website in your terminal. It should be in this format <project-id>.web.app .

For me, this is the URL I ended up with wr-firebase-hosting-cra.web.app.

You’ll the whole project here: https://github.com/omarhoumz/wr-firebase-hosting/tree/main/firebase-is-fire-cra

NextJs app

NextJs handles hybrid static & server rendering. And many more features. Firebase Hosting allows only to host static files. However, we can go around it by using Firebase Cloud Function and do some fancy Hosting rewrites.

SSG content step 4: build our project

We’ll need to build and “export” our next app, using the command:


1# yarn

2yarn build && yarn export

3

4# npm

5npm run build && npm run export

This will create an out folder. And this is the folder we need to deploy. We need to change the "public" key in the firebase.json file from whatever it is now to "out", like so


1- "public": "public",

2+ "public": "out",

SSG content step 5: Deploy

After a successful deployment, you should see the URL to your newly deployed website in your terminal. It should be in this format <project-id>.web.app.

For me, this is the URL I ended up with wr-firebase-hosting-next.web.app.

You’ll the whole project here: https://github.com/omarhoumz/wr-firebase-hosting/tree/main/firebase-is-fire-next

Conclusion

The steps to host anything in Firebase hosting is pretty easy once you know the basics. Fundamentally, you identify the folder where your static files are. You tell Firebase about it (using the “public” key). And then use the command to deploy your code.

From here, you can setup your CI/CD pipeline to automate this process.

Firebase Hosting has more to it than what I showed here. And even more products by Firebase. You can check them all at firebase.google.com.

If you have any question don’t hesitate to email me or shoot me a DM @omarhoumz on twitter.

How to create your first Firebase Cloud function

Omar Houmz — Sat, 30 May 2020 15:51:36 +0000

Originally posted in https://omarhoumz.com/blog/firebase-cloud-functions/

In this post we will cover one small, but very much hyped, part of serverless; cloud functions. One of the solutions available is firebase's "Firebase Cloud Functions".

We are going to:

Create and set up a Firebase project
Setup a Firebase cloud function
Deploy our first function
Setup a local dev environment

Requirements

I assume that you have node and npm installed on your machine.

Starter project

Before we start, let us set up a basic project to work with. I created some files and boilerplate code in this repo in the 001-create-a-firebase-function-start folder.

Check the readme file on how to get started with the code.

1. Create and set up a Firebase project

Create a Firebase project

To create a firebase project:

Go to the Firebase Console
Log in or create your account
Once on the home page, click the big "Add project" button
Enter a name for your project
Click "Continue" and follow the steps

And voila, we have a Firebase project.

Setup our firebase project locally

First, we have to install the Firebase CLI tools:

npm install -g firebase-cli

Then, we login to Firebase from the terminal:

firebase login

This will open a browser tab for us to authenticate to Firebase console. Once authenticated successfully, we should have our terminal prompt back.

Next is to initialize a Firebase project locally:

firebase init functions

The command will guide us through the setup. It will ask about 3 things: the Firebase project (which we already created), Cloud Functions language (I chose JavaScript, you can also choose TypeScript), and whether or not to use ESLint (which I replied with a "yes, please" to).

If all goes well, we should see these files created.

-
+ .firebaserc
+ .gitignore
+ firebase.json
+ functions/.eslintrc.json
+ functions/.gitignore
+ functions/index.js
+ functions/package-lock.json
+ functions/package.json

In addition to some other files you see, these are the important ones:

.firebaserc: stores your project aliases.
firebase.json: lists your project configuration.
functions/package.json node dependencies for our Firebase cloud function.

The file that we should take a look at now is functions/index.js. This is where we write our code for the cloud function.

Let us use this "helloWorld" example. Notice that I disabled the CORS header since we are in development.

const functions = require('firebase-functions')

exports.helloWorld = functions.https.onRequest((request, response) => {
  // disable CORS header
  response.setHeader('Access-Control-Allow-Origin', '*')

  response.status(200).json({ message: 'And, hello from serverless!' })
})

3. Deploy our first cloud function

Test the Firebase function locally

Before we deploy, we want to test the function locally. To do so, let us cd into the Functions directory:

cd functions

And start a local emulator (this is provided by the firebase-cli tools):

npm run serve

After this runs, the function will be watched for changes, and the local URL should be logged in the console. Look for something like this:

✔  functions[helloWorld]: http function initialized (http://localhost:5001/YOUR_PROJECT_ID/us-central1/helloWorld).

In the link above, YOUR_PROJECT_ID and us-central1 are the project id and the data center region for your Firebase project respectively. And helloWorld is the function name.

If we visit the URL and all goes well, we see this message:

{ "message": "And, hello from serverless land!" }

Deploy the Firebase cloud function

Now, let us deploy our function. While still being in the functions directory, execute this command:

npm run deploy

The result of the command should have a public URL to trigger our function. It looks something like this:

https://${DATA_CENTER_REGION}-${YOUR_PROJECT_ID}.cloudfunctions.net/${FUNCTION_NAME}

Trigger the cloud function

Next, let us use the function in our project. To do that, we add a div in the index.html file to show a message:

/* index.html */
  <h1>Hello Firebase Functions</h1>
+ <h2 id="function-response"></h2>
+

And in the index.js file:

// get the heading element
const messageDiv = document.querySelector('#function-response')

// a function that updates the heading
function updateMessage(message) {
  messageDiv.innerText = message
}

// make sure to replace these info with yours
const YOUR_PROJECT_ID = 'YOUR_PROJECT_ID'
const DATA_CENTER_REGION = 'DATA_CENTER_REGION'
const FUNCTION_NAME = 'FUNCTION_NAME'

// the function trigger endpoint
const url = `https://${DATA_CENTER_REGION}-${YOUR_PROJECT_ID}.cloudfunctions.net/${FUNCTION_NAME}`

// trigger the function and get the result back
fetch(url)
  .then((result) => result.json())
  // when we have the result, we update the heading with the message
  .then((data) => updateMessage(data.message))

After we made these changes, let us check the result. Run the dev server:

npm run start

If everything went well, we should see in our browser a message like this:

Hello Firebase Functions
And, hello from serverless land!

4. A better local development setup

When we are in development, we don't want to constantly deploy our function to see the result. So, we will leverage the local emulator provided by the Firebase CLI tools to have a better local development setup.

We know how to start the function emulator:

cd functions && npm run serve

We know how to start our dev server:

parcel ./index.html

Now, we need a way to start both of them with one command. Here is the easiest way I could find:

(cd functions && npm run serve) & parcel ./index.html

And to keep this setup, we're gonna edit the scripts in our package.json file:

"scripts": {
-  "start": "parcel ./index.html"
+  "start:frontend": "parcel ./index.html",
+  "start": "(cd functions && npm run serve) & npm run start:frontend"
},

And now we can use one command to start them both:

npm run start

For the url variable, we should modify it to accomodate for the environment (development vs production):

const url =
  process.env.NODE_ENV === 'production'
    ? `https://${DATA_CENTER_REGION}-${YOUR_PROJECT_ID}.cloudfunctions.net/${FUNCTION_NAME}`
    : `http://localhost:5001/${YOUR_PROJECT_ID}/${DATA_CENTER_REGION}/${FUNCTION_NAME}`

And now that we use the local url of the function, we can remove the CORS header in the function:

- // disable CORS header
- response.setHeader('Access-Control-Allow-Origin', '*')
+ // disable CORS header for development
+ if (process.env.NODE_ENV !== 'production') {
+   response.setHeader('Access-Control-Allow-Origin', '*')
+ }

And then deploy the function:

cd functions && npm run deploy

Summary

Until this point, we created a Firebase project using the Firebase console. In our local machine, we initialized our project a Firebase function and deployed it. We also configured a better setup for local development.

There is still much we can do here. We will explore other things in the next posts. But, if you are in a hurry, you can check the the Firebase Functions docs.