Now, let's create the initial folder structure for our project, which will look like this:

.
├── /build/             # Folder for compiled output 
├── /components/        # React components 
├── /core/              # Core application code 
├── /data/              # GraphQL data types 
├── /node_modules/      # 3rd-party libraries and utilities 
├── /public/            # Static files 
├── /routes/            # Isomorphic application routes 
├── /test/              # Unit and integration tests 
├── /tools/             # Build automation scripts and utilities 
├── .babelrc            # Babel configuration 
├── .editorconfig       # Text editor configuration 
├── .eslintrc           # ESLint configuration 
├── .gitignore          # Files to exclude from SCM 
├── client.js           # Client-side startup script 
├── package.json        # Holds various project's metadata 
└── server.js           # Server-side startup script 

It is important to organize your source files in a way so that it will be easier for you to access them and reference one from one another. Avoid deeply nested folder structures. Group your files by purpose rather than by file types.

Sometimes, developers split the application's source code into client and server folders. With isomorphic apps that might be unnecessary because many of the components are shared between client-side and server-side code.

You can copy the dot files (.babelrc, .editorconfig, .eslintrc, and .gitignore) from the example source code accompanying this book into your project.