Folder Structure

After creation, your project should look like this:

  1. my-app/
  2.   README.md
  3.   node_modules/
  4.   package.json
  5.   public/
  6.     index.html
  7.     favicon.ico
  8.   src/
  9.     App.css
  10.     App.js
  11.     App.test.js
  12.     index.css
  13.     index.js
  14.     logo.svg

For the project to build, these files must exist with exact filenames:

  • public/index.html is the page template;
  • src/index.js is the JavaScript entry point.You can delete or rename the other files.

You may create subdirectories inside src. For faster rebuilds, only files inside src are processed by Webpack. You need to put any JS and CSS files inside src, otherwise Webpack won’t see them.

Only files inside public can be used from public/index.html. Read instructions below for using assets from JavaScript and HTML.

You can, however, create more top-level directories. They will not be included in the production build so you can use them for things like documentation.

If you have Git installed and your project is not part of a larger repository, then a new repository will be initialized resulting in an additional top-level .git directory.