Software Prototyping (II) - React & Firebase start code

This article shows how to create an application using React, and make it public using Firebase.

The following articles of Software Prototyping will be written in Eng.

Start a React app project

To create the initial directory for your application, do the following terminal command in a directory you use for coding projects.

npx create-react-app [your app name] --use-npm

This command creates a new directory with the given app name. In that directory it puts an initial set of React files and scripts, and a .gitignore file that will keep git from storing literally thousands of Node libraries on github.

Then to make sure everything installed correctly, run:

cd scheduler
npm start

This starts a local web server and launches your browser on an index.html page that create-react-app created. After 10 to 20 seconds, a web page should appear with the animated React logo. This verifies that your React installation is working. If everything work correctly, you will see a page in http://localhost:3000/ like:

Create a Github repo

Stop your app in the command shell with control-C.

Go to Github and create a repository for your app. Follow these instructions for creating a remote repository for existing code. Do NOT create the default README or .gitignore files. They will be wrong. create-react-app has already created the correct files.

Go public

You need to host your web page on a server for testing, showing to users, etc. It’s good to do this as early as possible. You don’t want to spend hours or days building something only to discover it doesn’t work when deployed.

Firebase is used for hosting this tutoria. It’s free, simple, and you’ll need Firebase for other services later. Other options include Github Pages, AWS, and Heroku.

Follow these instructions to create a project on Firebase to host your React web app. Some points to pay attention to:

• Use the global -g option to install firebase-tools.
• Specify build when firebase init asks what the public directory is.
• Say no when Firebase asks about adding Github Actions.
• Don’t forget to do npm run build before deploying.

Verify that you see your React app running at the URL that Firebase gives you.

After completing these settings, deploy your app using:

firebase deploy

Then you can see you application on the given link provided by firebase.