jepa

jepa ·

A highly customizable React framework for painless SPAs.

Getting Started

yarn add jepa react react-dom
  # or
npm install --save jepa react react-dom

Table of Contents

• Customization
  • Files
  • jepa.options.js
  • Environment Variables
  • jepa.config.js
  • Runtime Dependencies

Customization

Files

You can optionally replace the following files:

• src/server/index.js: The server entrypoint.

• src/server/renderServerWrapper.js: A function that takes a React.Component and return an object of shape:

  {
    renderedRoot: React.Component,
  
    // HTML string that will be placed after other styles in the head.
    style: String,
  
    // HTML string that will be placed before other scripts in the end
    // of the body, useful for providing SSRed stores, for example
    // Redux or Apollo stores.
    script: String
  }
  

• src/client/renderClientWrapper.js: A function that takes a React.Component and returns a React component.

• src/universal/Root.js: The root of the universal app.

jepa.options.js

• name (String): The name of the project.
• host (String): Defaults to 0.0.0.0.
• port (Number): Defaults to 3000.
• clientDevServerPort (Number): Defaults to 3001.
• basePath (String): The base URL the app will be mounted at. Useful when your app is served behind a proxy. Defaults to /.
• getRouter (AsyncFunction): An async function that returns an express router.
• compress (Boolean|Object): Set this to true or object with compression options to enable HTTP compression. Defaults to !__DEV__.
• favicon
• robotsTxt (String)
• manifestJson (Object)

TODO:

• staticDir (String)
• bodyParser (Boolean|Object)
• logger
• forceSsl
• sslPort
• securityTxt (String): (https://securitytxt.org/)

Environment Variables

Environmental variables can be used to override options that were set in jepa.options.js during startup time. You can place a .env file in src/ folder.

The following variables are currently supported:

• process.env.HOST
• process.env.PORT

jepa.config.js

• webpackModify (AsyncFunction): A function that takes an object argument of shape {webpackConfig, target: 'web' || 'node', env: 'dev' || 'prod'}, and should return a webpack config object.
• postcss (Object): postcss-loader options.

Runtime Dependencies

By default both client and server are bundled with Webpack, which means there is no use of node_modules during runtime. Most of the time this works perfectly fine however there are cases when certain dependencies can't be bundled (usually these are native dependencies).

You can create a package.json file and optionally package-lock.json or yarn.lock files and specify dependencies there that shouldn't be bundled with Webpack and installed to node_modules.