Firebase Hosting is production-grade web content
hosting. With a single command, you can quickly deploy
web apps and serve both static and dynamic content to a global CDN (content delivery
network). You can get started for Free with a Spark
plan. Besides other features, you'll get the ability
to use a custom domain and a TLS certificate. In this video, we will quickly bootstrap React
app using the create-react-app tool and deploy it to the Firebase hosting. Then I'll show you how to add a custom domain
to your web app. You can do it by creating a couple of A records. Finally, we will set up automatic builds and
deploys with GitHub. When you make a change and create a pull request,
GitHub actions will build and create a Preview for you that you can test before merging your
code to the main branch. Alright, let's get started. There are a couple of prerequisites. First, you need a Firebase account, and you
need a nodejs runtime installed on your development host, including npm version 5.2 or higher. Let's run the npm version to make sure that
we are up to date. Then you can use npx; it is a tool intended
to help round out the experience of using packages from the npm registry. It's been available in npm starting version
5.2. create-react-app is another tool that can
quickly get you up to speed with react. You don't need to install it separately; if
it's not available locally, npx will download it first and generate React boilerplate for
you. Let's call our app react-demo-085. Let's open it with visual studio code. We have packages json to keep track of the
dependencies and the React code under the src directory. This page you will see in the browser when
we deploy it. Let's run it locally first to make sure it's
working. When you run npm start, it will open a default
browser for you. Here is our App. Next, we need to create a firebase project. Go to the console and click Create a project. I'm going to call it the same as a React app. If you have a GCP organization, you can select
it here. Optionally, you can use google analytics. You can create a new one or use a default
account. To deploy React app to the Firebase hosting,
we need to install another npm package called firebase-tools. Before you can use it, you need to log in
with the firebase login command. Just to check if we can access firebase api,
let's list the projects in our account. It works; we have two projects, including
react-demo-085. Before we deploy React app to the FIrebase
hosting, we need to create an optimized production build. It will convert all the React code to HTML,
javascript, and CSS and place it under the build directory. Let's run npm run build to do that. When we configure firebase deploy, we will
specify this folder and index.html file as an entry point to our app. You can see that it's gray out since it's
added to the gitgnore, and we never commit these files to the git. Now, let's run firebase init hosting to initialize
the project. Select use an existing project and select
one that we created earlier. Instead of public, use build directory. Say yes since we are building single page
react app. Skip GitHub CI/CD; for now, we will come back
to it a little bit later. We're done; we just need to deploy using the
firebase deploy command. If you have only hosting configured in the
current folder, you can omit the rest of it. Alright, your React app is deployed, and you
have an external URL that you can use. Let's copy it and use incognito mode in chrome. You can see that we can access it, and also,
it will have a TLS certificate, so all the connections to your web app will be secure. It has a wildcard certificate for the web.app. Next, let's add a custom domain. You can host your domain anywhere; the flow
will be the same; you just need to create A records. Let's enter our domain, in my case, devopsbyexample.io. If you host your domain, not with Google,
to verify the ownership of the domain, you would need to create a TXT record with the
provided values. It's easy as creating any other records. Just enter provided key and click verify. You have to keep that TXT record, don't remove
it after Firebase verifies it. Then you need to create A record to point
your domain to the Firebase IP address. Optionally, you can include www. It will take from 5 minutes to a couple of
hours to provision TLS certificate. Wait till it says connected, and then visit
the web page. Alright, it's done. Now let's go to the browser and use our domain
to access the web app. The certificate is valid as well. www subdomain should work. Next, let's set up CI/CD with GitHub Actions. We need a repository first. Let's give it the same name and mark it as
private. Since we already have our react app locally,
we need to establish a connection between the local repository and remote on GitHub. Now, let's commit and push our changes to
the main branch. We need to reinitialize our firebase hosting
to add GitHub Actions. Same build directory. Now, answer yes to set up automatic builds. It will prompt you to authorize your GitHub
account with Firebase. When you confirm it, it will show you a successful
login page. Since we already added a remote URL, firebase
detected it and asked to confirm if we want to use that repo; press enter. We need to run the npm build every time when
there is a change. So let's say yes. Then the command to run, it's pretty standard
npm ci to install dependencies and then build optimized production artifacts. Now, if you want to get a preview each time
you create a PR, which I highly recommend, answer yes. Then specify the main branch, which is called
main instead of master. When you initialize the Firebase project,
it will create a couple of files in the root directory. Before making any changes to the web, let's
commit and push. Since we already configure CI/CD with GitHub
actions, it will run build when we push it. GitHub Actions detected the change and running
the deployment. Open the web app to check if there are any
changes. Nope, it's the way we generated it. Now, let's simulate the typical workflow for
the new feature. Create a branch of main, make the change,
commit and push. Just add any arbitrary change, new feature
X, for example. When you add files to the git tree, you can
either use a dot to indicate add all the files or use a filename or directory. When we push, git will generate a link that
you can click to create a PR. Or you can do it from GitHub as well. That's our new feature. Now, when you create a PR, it will run npm
build and generate a preview right from the pull request tab. Let's wait a little bit. Alright, we have the link with the Preview;
let's open it up. This is the main web page deployed from the
main branch without any changes just yet. If we open the link, you can see the text
New feature X. Now to deploy this change to the devopsbyexample.io,
just merge the PR. After merging to the main, GitHub will rerun
the same command and deploy the new version of our app with a new feature. If you go back to devopsbyexample.io and refresh
the page, you'll see the change. Thank you for watching, and I'll see you in
the next video.
