Skip to content

hmr

Jump to bottom
Deva Kumar edited this page Apr 27, 2022 · 5 revisions

Integration with create-react-app

** Obsolete ** This section is for users developing applications using create-react-app and restaf-server.

During development the hot module replacement that comes with create-react-app framework is a life saver. With a few minimal modifications you can enable your app for HMR and still make all the REST API calls to Viya.

After the setup described below, the app can be displayed with HMR as follows:

    "dev": "node dev --env=.env --docker=Dockerfile --appenv=appenv.js",
  1. Invoke the app as usual. This will start the viya-server.
  2. Visit your app url as usual
  3. On logon, the app will be displayed with HMR active in a second tab. When you edit the code, the code will be rebuilt and the display updated.

These are the steps to upgrade your app built with create-react-app

Step 1: dev.js

Create a js file in the root directory of your project. Cut and paste the code below into it.The name of the file is whatever you want. For this document assume that the name dev.js. Also change the placeholder {APPNAME} to your APPNAME(ex: ORAPP)

let rafserver = require ('@sassoftware/restaf-server');
rafserver.icli (getCustomHandler());


function getCustomHandler () {
    let handler = [
        {
            method: ['GET'],
            path  : `/{APPNAME}/develop`,/* rep APPNAME with your appname -- ex: ORAPP */
            config: {
                auth   : false,
                cors   : true,
                handler: async (req, h) => {
                    const spawn = require('cross-spawn');
                    let child = spawn('npm', ['start'],{stdio: 'inherit'})
                    return `<h2>Viya Server: ${process.env.VIYA_SERVER}<h2>
                                <h3>Your session is authenticated</h3>
                                <h3>Your application is now running in another tab </h3>
                                <h4> HMR is active</h4>`;
                }
        }
        }
    ];
    console.table(handler);
    return handler;
}

This adds a new route to the app server.

Step 2: Setup proxy - setupProxy.js

  1. Install http-proxy-middleware
  2. Create setupProxy.js file in the src directory and set the code as shown below. This allows create-react-app server to proxy to the application server started thru restaf-server.
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    `/${process.env.REACT_APP_APPNAME}`,
    createProxyMiddleware ({
      target: `${process.env.REACT_APP_TARGET}`,
      changeOrigin: true,
    })
  );
};

Step 3: dev.html

Add this dev.html file to the public directory. Replace {APPNAME} with the name of your app(ex: ORAPP)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <script>
        let url = `${window.location.protocol}//${window.location.host}/{APPNAME}/develop`;
        window.location.href = url;
    </script>
  </head>

  <body>
  </body>

</html>

Step 4: .env file

  1. Make a copy of your env file and name it .env
  2. Change APPENTRY to dev.html
  3. Change APPLOC to ./public
  4. Add these two lines to the .env file
REACT_APP_APPNAME = <your-appname>
REACT_APP_TARGET  = <your-apphost>:<your appport>

Example:
REACT_APP_APPNAME=ORAPP
REACT_APP_TARGET=http://localhost:5000

Step 5: Changes to package.json

Update your package.json file to have this script.

    "dev": "node dev --env=.env --docker=Dockerfile --appenv=appenv.js",

Step 7: Optional changes to index.html

Recommend that the script tags for appenv be coded as follows:

<script type="text/javascript" src="/%REACT_APP_APPNAME%/appenv"></script>

Table of Contents

Clone this wiki locally