Hello World

Antoine Jaussoin

Published in

Around the App in 365 days

5 min readMar 9, 2018

The real voyage of discovery consists not in seeking new landscapes, but in having new eyes.
Marcel Proust

In our previous article, we created a brand new repository on GitHub.

In the following weeks, we are going to build an MVP (Minimum Viable Product) that we can deploy in production to get some initial user feedback.

If you don’t remember what this app will be about, you can read all about it here.

Let’s try to figure out what we want on our MVP:

The ability to create a Planning Poker game
The ability to join an existing game
The ability to create stories
The ability to remove stories
The ability for anyone to select a story and start estimating
No need for persistence on the server side
No need for options or different rules

Today, we are going to use Create React App to bootstrap a new application.

Create React App (CRA for short) is a tool created by Facebook that simplifies greatly the bootstrapping of a React application.

Indeed, creating a React application from scratch can be a daunting task: you need to know Webpack, import a ton of libraries (React, React DOM, CSS loaders for Webpack, Webpack itself…), configure Webpack, make sure webpack can serve your files and add an HTML file to host your JavaScript…. And that’s the tip of the iceberg.

With CRA, you can have an up-and-running application with one command line, and go from there. A huge time saver!

Installing Create React App

Installing CRA is pretty easy:

yarn global add create-react-app

This will install the command line utility in your path, which means it will be accessible in any folder.

Bootstrapping our app

Last week, we looked at how to create our shiny new repo on GitHub, and how to clone it on your local machine, so at this point you should have a “plannipoker” directory somewhere on your machine.

In your Terminal, CD (change directory) into the parent directory of “plannipoker”: for instance, if you cloned in ~/dev/plannipoker, please cd into ~/dev.

Then, run the following command:

create-react-app plannipoker

As you can see above, this will bootstrap a working React application into your repository folder.

Running our app

Now that your app is cloned and ready, go to its directory:

cd plannipoker

And then simply:

yarn start

Lo and behold, it should open a new window (or a new tab) in your default browser with your running app!

Saving our work

At the moment, the code we added only exists on your local machine. We now need to add it to our Git repository, both locally and remotely (on GitHub).

Before doing that though, we are going to create a development branch: the development branch will be our “day-to-day” branch, and we will only merge from development to master when the development branch is stable and working. This way, master will always be in a working state.

From your Terminal, assuming you are already in your project directory, open Visual Studio Code by doing:

code .

Open the Command Palette by using the following shortcut:

⇧ + ⌘ + P (Mac) or Ctrl + ⇧ + P (Windows, Linux)

Then start typing “create branch”:

Once the proper command is highlighted (first option in the list), then hit Enter and give it a name: development in this case:

Once that’s done, it should have switched our project to this new branch.

Head now to the Git panel in VS Code, which is the third icon on the left-hand-side toolbar (see left most pink arrow on the screenshot below):

This panel displays all the files that were added, deleted or modified since the last commit. All these changes are not part of the repository yet, so we’ll need to commit them first.

Give the commit a message (a description), and then hit ⌘ + Enter (Mac) or Ctrl + Enter (Windows, Linux).

Your changes are now committed, but only locally. To push theses changes to GitHub, open the Command Palette again by hitting ⇧ + ⌘ + P (Mac) or Ctrl + ⇧ + P (Window, Linux), then type “push”: