Bootstrap your Firebase + React project

1. Create a Firebase account
2. Create a new project
3. Go to Hosting
4. Select Get started and follow the steps (install the CLI, create a directory for your project and initialize it with firebase CLI)
5. firebase init
6. Chose all options (database, hosting, and functions).
7. Select the project you created in step 2
8. Select the default for the database rules file
9. Select Y to install dependencies now
10. When asked about the public directory use app/build (this is important for React.
11. For the index.html option I chose Y to have a single page app.
12. firebase deploy the default files so that you can test it. You will replace this with your files later.
13. Now you can go to the custom Firebase URL (printed in the console) to look at your site.

Configure Firebase Hosting to use your domain

Assuming you already purchased your domain name (no need for hosting since you will use that from Firebase). If you don’t have one you can get it from somewhere like godaddy.com.

1. In the Firebase console site press theCONNECT DOMAIN button
2. Enter your domain (e.g. crelit.com)
3. Firebase will prompt you to create a TXT record to prove that you own the domain
4. Go to your domain management site (e.g. godaddy.com)
5. Create a TXT record as instructed in the Firebase page
6. While you wait for the record to propagate, remove all CNAME and A records in your domain management service.
7. Now try to verify (there is a button in the Firebase console for it) the domain. When verified you will get more instructions.
8. Create an A record (it will actually be 2 that Firebase gives you) for your domain (for example crelit.com).
9. Firebase now will show you a banner saying something like “Would you like to connect www.crelit.com too?” Go ahead and press CONNECT and then press CONTINUE. The defaults will make it so that all traffic is redirected to crelit.com.
10. Follow the instructions to add another A record (2 again) for the www. (example www.crelit.com). This will make it so that regardless of what you type (www.crelit.com or crelit.com) the user will always end up in crelit.com. This also helps with page ranking.
11. Try visiting your site. It may take up to an hour for the domain to properly work until the SSL certificates (what makes HTTPS secure) propagate. Sometimes it is very fast. Both (www.yoursite.com and yoursite.com) should end at yoursite.com. If not there is something configured wrong.
12. Now you have the same website that does nothing, but with your own domain. The simplest HTTPS configuration I’ve ever seen.

Bootstrap React

1. yarn global add create-react-app
2. Go to the directory where you initialized Firebase
3. Delete the app directory
4. create-react-app app
5. cd app
6. The README.md file included has information on the generated project. Also see the links below to learn more about React

Run a test server

Use yarn start. This will start the React project in your server. Save changes to your project files and the web page will reload.

Generate a build optimized build

Use yarn build. The optimized version will be in app/build ready to be deployed.

Deploy the optimized version to Firebase

Use firebase deploy which will deploy the content of app/build to the server.

What’s Next?

• To learn more about React — https://facebook.github.io/react/
• To learn more about Firebase — https://firebase.google.com/products/

Like this article? Press the heart below and share it! Know a better way to do things or just want to say hi? Great! I love learning new and better ways :) Write me at hey at itsmeeric.com.