TOEIC Test – Part 3 Setting up React project

Previous tutorials:

• Part 1: Host web application in Firebase
• Part 2: Connect custom domain to Firebase

In this tutorial, I gonna show you how to setup a React project and deploy it to Firebase.

Why React

Nowadays, we’re leaving in a golden age of software development. Building software is not as hard as before, a ton of available libraries, frameworks can help us to build software and bring it to the customer’s hand more easily and quickly. There are 3 libraries, frameworks that are dominating the web development such as Angular, ReactJS, and Vue. In this scope of tutorial series, we’ll use React to build a “TOEIC Learning” web application.

Set up React environment

Come back to the project we created in tutorial part 1, it’s still a vanilla javascript project. In order to build an application more quickly, we’ll use ReactJS as a front-end library to help us to build responsive user interfaces.

Our current folder structure:

Please remove public folder because we don’t need it anymore

run this command to initialize ReactJS application

$npx create-react-app app

app/src folder contains React code and that is the folder we must work in to develop the React application.

Try to start the application by running

$cd app && npm start

The browsert will automatically open a new tab at address http://localhost:3000/, that is where our application is running.

Now navigate to src/App.js and make some changes:

import React from 'react';
import './App.css';

function App() {
  let blog = "https://frontend.cloudaccess.host/";

  let logo = "https://frontend.cloudaccess.host/wp-content/uploads/2019/03/010a9061-dcf4-4dd9-b879-ba1a7305280f-150x150.png"
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo}  alt="logo" />
        Welcome to        <a href="{blog}">Frontend        </a>
      </header>
    </div>
  );
}

export default App;

Come back the browser, and check the result

If you see something like this. Congratulation! we have successfully set up a ReactJS application.

Keep in mind that whenever you change the code for React application, we don’t need to refresh the page, because React application will listen to the change for source code and automatically refresh if there are some changes.

However, it’s just run on your local machine. We can’t access it from anywhere else except only your local machine. You want to introduce this application to your friend, we need to deploy it to Firebase.

Deploy React application to firebase.

At the moment, we’re just running the development mode for our application, we can’t just deploy App.js to Firebase because it won’t work. To make it can runnable in Firebase, we need to build . Which mean we need to collect all the required libraries and resources, compress it to a bundle and deploy it to Firebase.

To build a React Application just run :

$npm run build

When the build process is finished, look at the project folder, you’ll see a new folder is just generated: build that contains all needed files to make our application folder can runnable in Firebase

Next step, we need to tell Firebase that we need to deploy that folder app/build to the Firebase hosting instead if folder public like before:

• Open firebase.json in the root folder
• Update public property to app/build
• Done

Something like this:

Now in the root folder, run firebase deploy to deploy our React application to Firebase. You’ll see the same result with localhost:3000 but this time it’s running in Firebase Hosting and can access everywhere 🙂

Next step

In next tutorial, I will show you how to apply CD/CI tool to help us build and deploy React application automatically. See you <)