v1 Structure

There are quite a few files and folders in the base structure of this starter kit, which can make it initially confusing. If all you want to do is start creating your app, you can:

• Write your React components in client/src/, just as you would in a Create React App application's src/ directory;
  • Dependencies that are only used on the client side should be installed as devDependencies with --save-dev/-D; and
• Write your Express routes in server/api.js (or in sub-routers that you .use here);
  • Endpoints are all mounted at /api and can be accessed relatively, so if you defined router.get("/endpoint", ...) the client would fetch("/api/endpoint"));
  • Dependencies that are used by the server at runtime must be installed as production dependencies.

For more detail, see below.

CodeYourFuture version

• .github - files for configuring the GitHub repo, e.g. providing templates for issues and pull requests
• .vscode - files for configuring the VS Code IDE, including defining some recommended extensions and providing debugging configuration for the dev mode
• client/
  • src/
    • pages/ - contains the components representing different pages within the site, currently just About.js and Home.js
    • App.js - this is the root component of the app, where the React Router switch that chooses between the pages can be found; new page routes can be added here
    • index.js - mounts the root component in a router context and renders it in the DOM.
  • webpack/ - Webpack configuration for building the client-side app in development and production modes
• server/

  • api.js - the crucial file in the server directory, where the Express router that defines the API routes is created. To facilicate push-state routing (the React Router client-side pages) in production mode, all API routes are mounted at /api, so router.get("/", ...) defines the handler for GET /api. Other methods and routes can be added here, all relative to that top-level /api endpoint.

  • app.js - creates and configures an Express application object with appropriate middleware, including mounting the router described above and serving the client files for production mode

  • db.js - in the Postgres or MongoDB versions, this exposes functions that allow the server to connect to and disconnect from the database. The Postgres version also exposes an object with a query method you can import and use where you want to access the database (the MongoDB version handles the connection globally using Mongoose). The connection string is supplied as the DATABASE_URL (Postgres) or MONGODB_URI (MongoDB) environment variables, or falls back to trying to connect to the default ports on localhost (see v1 Dev Setup#Databases, or if you want to use an environment variable in your local environment, see v1 Dotenv).

  • server.js - imports and starts the app on the configured port (either the value of the PORT environment variable or the default, 3000)

  • utils/ - contains various utility modules. In practice, you'll probably:

    • Import from and maybe add new options to config.js;
    • Import from logger.js; and
    • Ignore middleware.js entirely (all predefined middleware is already used in app.js).

    See server/utils/README.md for more details.

Full version

The full version of the starter kit also includes the following:

• __mocks__/ - a trivial file mock is provided to cover for CSS or image assets imported into React components, see the moduleNameMapper in jest.config.js and e.g. Using [Jest] with Webpack
• bin/ - scripts for various tasks, see bin/README.md
• e2e/ - files for the Cypress end-to-end tests, using their suggested folder structure; the tests themselves are in e2e/integration/
• server/static/ - only used to test the handling of static files and push-state routing, dist/static/ will contain the bundled React client