Skip to main content

Migrating from CRA

If you already have an application and would like to migrate to FrontHub ecosystem, there are two possible cases.

  1. Application created with CRA (Create React App) NOT ejected.
  2. Application created with CRA ejected or not created with CRA.
  3. For both cases

Applicaton created with CRA NOT ejected​

If your SPA was made using create react app, we need to gain access to its configuration, so we can install custom webpack plugins, let's install react-app-rewired to do that.

Step 1 - Install FrontHub dependencies​

Install the FrontHub dependencies.

  yarn add @resultadosdigitais/front-hub @resultadosdigitais/front-hub-commons

Step 2 - Add the FrontHub webpack plugin​

Install the dependency react-app-rewired. This dependency is necessary to access webpack plugins in CRA applications not ejected.

For create-react-app 2.x with Webpack 4:​

yarn add react-app-rewired -D

For or react-scripts-ts with Webpack 3:​

yarn add react-app-rewired@1.6.2 -D

In the project's root directory create the file config.override and paste the below content within it.

  const FrontHubWebpackPlugin = require('@resultadosdigitais/front-hub/react/webpack-plugin');

  module.exports = function override(config, env) {
    config.plugins.push(new FrontHubWebpackPlugin({
      dev: false
    }));

    return config;
  };
+-- your-project
|   +-- config-overrides.js
|   +-- node_modules
|   +-- package.json
|   +-- public
|   +-- README.md
|   +-- src

Step 3 - 'Flip' the existing calls to react-scripts in npm scripts for start, build and test​

package.json
  "scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "NODE_ENV=production react-app-rewired build",
-   "test": "react-scripts test",
+   "test": "react-app-rewired test",
  }

*Note that you DO have to include *NODE_ENV* variable.

After executing the above steps, go to For both cases session and complete the migration process.

Applicaton created with CRA ejected or not created with CRA​

If your application was created with CRA and ejected, or even was not created with CRA, then follow the below steps:

Step 1 - Install the FrontHub dependencies.​

  yarn add @resultadosdigitais/front-hub @resultadosdigitais/front-hub-commons

Step 2 - edit your webpack.config.prod.js and webpack.config.dev.js, or related​

const FrontHubWebpackPlugin = require('@resultadosdigitais/front-hub/react/webpack-plugin');

    ...

    plugins: [

      ...

      new FrontHubWebpackPlugin({
       dev: false, // false for webpack.config.prod.js, true for webpack.config.dev.js
      }),
    ]

    ...

After executing the above steps, go to For both cases session and complete the migration process.

For both cases​

Change your SPA entry point​

index.jsx
import React from "react";
import ReactDOM from "react-dom";
import { Connect } from "@resultadosdigitais/front-hub/react";
import MyApp from 'src/Application'; //<-- this is the up most comp

// ...

- ReactDOM.render(<MyApp />, document.getElementById('root'));
+ export default Connect(MyApp);

That is all, from now on your builds will be managed by front-hub. You can create more components using our CLI.

You can edit this document here