The other day I deployed a React app I made for my wife, Funky Cafe. It’s a full stack app with the back end being Rails and the front end being React. Beforehand, I made sure it was responsive to smaller screens and would adjust accordingly.

I ran into a few problems when I deployed the front end to Firebase, nothing that wasn’t fixable though. That’s what the first part of this article will be about, the steps to deploying a React app to Google Firebase. I’ll also be discussing how to make that web app look and act like a mobile app when added to an iOS or Android home screen.

In a previous post I built a Tic-Tac-Toe app with React, I figure that project will make a perfect example, so I have made it responsive to mobile sized screens in order to prepare it to be deployed. For this post I’ll be deploying the app to Google Firebase, and replacing it’s favicon.ico and other logos to make it look more professional on browser tabs, mobile home screens, and the splash screen for Androids upon opening progressive web apps.

Goals for this post:

1. Create the project on Firebase and connect to our project through the terminal in order to begin hosting.
2. Generate a new favicon.ico, and logo images for the app.
3. Alter the manifest.json and index.html files to show new icons as a progressive web app on a mobile home screen (Android or iOS).

#app-development #firebase #deployment #react