Author avatar

Zachary Bennett

Pull and Build a React App Created via create-react-app from GitHub

Zachary Bennett

  • Oct 23, 2020
  • 3 Min read
  • 61 Views
  • Oct 23, 2020
  • 3 Min read
  • 61 Views
Web Development
Front End Web Development
Client-side Frameworks
React

Introduction

The create-react-app tool is the best way to get started with a new React app. Instead of needing to bring in related dependencies, bundlers, etc. into your new project, create-react-app abstracts all of that away so that you can easily get started writing code. If you desire more fine-grained control, you can "eject" from the create-react-app environment and manage the inner workings yourself. But for many apps, letting create-react-app abstract away all of the build configurations is an enormously helpful timesaver.

In this guide, you will learn how to identify, pull, and then build a React app that has been created using create-react-app.

Let's get started!

Note: This guide assumes that you have a Node version >= v8.10, an NPM version >=5.2, and the git command-line tool installed on your machine.

Pulling and Building a Project Created With create-react-app

You will know that an app has been created using create-react-app when you can find the package react-scripts in the package.json file of the project. If you see this dependency, you can almost be certain that the project was built using create-react-app. Another hint can be found by looking for the "eject" script located within the scripts section of the package.json as this is an NPM script that ejects the app from the create-react-app environment.

Now that you know how to identify a create-react-app, you can use git to pull the project from GitHub. This step entails simply navigating to the project's repository on GitHub, selecting the remote URL from within the green Code dropdown, and then running git clone <project's remote repo url> on your local machine. This command will clone down a local version of this remote project.

With your project pulled, you're ready to start building. There are two ways to build an app created with create-react-app. You can do a development build or a production build. The development build can be started by running npm start. This will bring up a local server containing the development version of the app and will automatically refresh when you change the source code.

For a production build, you simply need to run npm run build. This command will build a production-ready version of the app that is ready to be deployed.

To recap:

Development Build:

1
npm start

Production Build:

1
npm run build

Note: If these commands do not exist, it is likely that the specific project you are looking at has customized their scripts. In this case, you will need to make sure to read the relevant GitHub README.md file in order to understand which commands build the project.

Conclusion

Pulling and building an app that was created via create-react-app is easy! There are just two simple scripts that let you build development and production versions of the app. This is probably why create-react-app is now officially supported by Facebook when it comes to using a tool to bootstrap new React apps.

For more information regarding create-react-app and how to interface with it, please check out the relevant create-react-app documentation.

0