Introduction

This folder is generated with create-react-app (CRA). CRA helps set up React with additional, optional libraries in one command. We don’t need to know how CRA sets up the development environment for React, and for this boilerplate, I’ve gone and added a lot of necessary libraries and files to make it easier for you to start. To start any React project, simply clone this subfolder of the boilerplate and start coding!

Folder Structure

There are a lot of files & folders in the client/ directory. Let’s take a quick look

public/
src/
utils/
.env.example
.eslint.js
.prettierrc
README.md
package-lock.json
package.json
tsconfig.eslint.json
tsconfig.json
tsconfig.node.json

I won’t go through every file in detail, since most of them are configuration files. If you are interested, here are some links:

• *.eslint.(js | json)
  • .eslint.js
• tsconfig.*.json
  • tsconfig.eslint.json, tsconfig.json, tsconfig.node.json
• prettier.rc

package-lock.json and package.json are explained here:

Node Packages

.env files are explained here:

.env

public/

This folder contains the index.html file that React uses to render all components. You can change the <meta/> tags and add <link/> tags to stylesheets, fonts, etc. The folder also contains, and is used for containing, static assets (usually images). All files in this folder will be served, meaning anyone can access these files. In the boilerplate, you’ll see some images for the favicon that shows up in the tab.

src/

This folder contains all our code 🙂 There’s not really anything else 🤷

More details about it here: