What Does yarn start Really Do??
At the most basic level yarn start simply runs your application locally so you can access it (defaults to port 3000). In this doc, we'll dissect the yarn start to understand what in can do in more depth.
start Script in package.json
When you run yarn start all that is really doing is running the start script that is defined in the package.json. Lets take a look at that script:
nf start -j Procfile.dev
What's nf? What's Procfile.dev?
nf is the command line tool that comes from the node library foreman.
Foreman is a manager for Procfile-based applications. Its aim is to abstract away the details of the Procfile format, and allow you to either run your application directly or export it to some other process management format.
In short, the command above uses foreman [the node version] to run the file Procfile.dev.
Procfiles allow you to specify different processes that should be run. These processes are simple shell commands that would usually be executed directly in your terminal. The benefit on procfiles and foreman, is that they allow you to start multiple controlled processes at the same time with one foreman start command. Foreman is awesome 
.
For more information about Procfiles and this project, check out the doc Foreman and Procfiles
Taking A Look At the Procfile.dev
express: node src/server
web: yarn run start-ui
This is what the Procfile.dev looks like. The first line express: node src/server will create a process named express started by the command node src/server. The second line will create a process named web started by the command yarn run start-ui.
When this Procfile is run via foreman, both of these processes will start and run. This will start both the express server and the UI server so the app can be accessed!
Running yarn start
yarn start is is where everything you've read in this doc finally comes together. This command runs our Procfile.dev with foreman to start two different processes:
- Express Server
- Web React App Server
These processes running at the same time make up a fully running local version of the application. When you run yarn start the output should look something like this:
If you look closely, you can see the pink text is console output for the express server process:
12:41:14 PM express.1 | Running on port 5000
The blue text, on the other hand, is the console output for the React web server:
12:26:37 AM web.1 | $ PORT=3000 react-scripts start
12:26:38 AM web.1 | Starting the development server...
12:26:46 AM web.1 | Compiled successfully!
12:26:46 AM web.1 | The app is running at:
12:26:46 AM web.1 | http://localhost:3000/
12:26:46 AM web.1 | Note that the development build is not optimized.
12:26:46 AM web.1 | To create a production build, use yarn run build.
All of the console output from your application (both backend and frontend) will display here.
To quit or end your running servers, simply enter ctrl + c in your terminal window.