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; and
• Write your Express routes in server/api.js (they're all mounted at /api and can be accessed relatively, so if you defined router.get("/endpoint", ...) the client would fetch("/api/endpoint")).

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/ - the crucial file in the server directory is api.js, 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.

  Other files in that directory are:

  • 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
  • middleware.js - provides various Express middleware factories for use in app.js:
    • configuredHelmet - provides a configured version of the helmet middleware to set the right Content Security Policy
    • httpsOnly - redirects the user to https://your.site/path if they try to access http://your.site/path, to make sure they have a secure connection (only used if NODE_ENV is production, so you can use HTTP for local development)
    • logErrors - if there's an unhandled error, this logs it to the server console and responds 500 Internal Server Error to the request
    • pushStateRouting - provides the client app index.html to any GET request that isn't to an API endpoint, allowing client-side pages using e.g. React Router
  • server.js - imports and starts the app on the configured port (either the value of the PORT environment variable or the default, 3000)

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