Switching from create-react-app to neutrinojs

I’ve been doing react development for a couple of months now, and have found some frustrations with create-react-app.

The key problem I’ve had is serving the application for a url with a path.

I want to provide a suite of applications that run behind a proxy. This gives the choice of two kinds of routing:

• Host based — the application is given a DNS alias and routed to the appropriate server/port,
• Path based — the proxy examines the path and routes appropriately.

Host based routing requires a lot of admin input, and doesn’t scale well for a large number of apps, so the best choice for me was path based routing.

Unfortunately it is very difficult to do a development build with create-react-app which serves the application from anything other than a root url. It’s fine for the production build, but development and testing is problematic. Enter neutrinojs.

Neutrinojs

The jobs that create-react-app does are:

• Transpiling with Babel,
• Packaging with webpack,
• Serving the app in development.

Neutrino provides a generic solution for javascript using middleware to solve the above problems. I’ll leave it to the basic documentation to give the details, but the quick start is:

yarn create @neutrnojs/project my-project

Follow the menu options and you’re there. After that we have the familiar: yarn start, yarn build, etc.

Tips and Tricks

The following is an example “.neutrino.js” configuration file which serves to a non-route url.

module.exports = {
  use: [
    '@neutrinojs/standardjs',
    [
      '@neutrinojs/react',
      {
        html: {
          title: 'May Application',
          favicon: 'src/static/favicon.ico'
        },
        publicPath: '/some-path/',
        devServer: {
          port: 8081,
          disableHostCheck: true,
          historyApiFallback: {
            rewrites: [
              {
                from: /^\/some-path\/.+$/,
                to: '/some-path/'
              }
            ]
          }
        }
      }
    ]
  ]
}

The line starting “@neutrinojs/standardjs” was suprisingly important. When creating a project the option was AirBnB or StandardJs. The standard eslint configuration generated errors when importing a font into a javascript file. Using StandardJS is the path of least resistence.

The “publicPath” property instructs the built code to expect to be served relative to its value.

The properties under “devServer” directly follow those in the webpack de-server guide. You can see I am rewriting the path to appear to be behind the url prefix. I have chosen to develop behind a local proxy to provide an environment as close to production as possible. The “disableHostCheck” is necessary to fake up a non localhost host.

Finally the “html” section provides a “favicon”. Without this I got continual errors from the browser failing to find the favicon at the root url.

Other Benefits

A secondary benefit I fond with neutrino was the ability to create React components and web components. These are also available from the “create project” menu.

An example of a JavaScript library built with neutrino can be found here.

Good luck with your coding.