-
Notifications
You must be signed in to change notification settings - Fork 2
hmr
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=dev.env --docker=Dockerfile --appenv=appenv.js",
- Invoke the app as usual. This will start the viya-server.
- Visit your app url as usual
- 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
In appenv.js add these lines:
process.env.REACT_APP_APPNAME = process.env.APPNAME;
process.env.REACT_APP_TARGET = `http://${process.env.APPHOST}:${process.env.APPPORT}`;
This sets environment variables for the create-react-app.
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
let rafserver = require ('@sassoftware/restaf-server');
rafserver.icli (getCustomHandler());
function getCustomHandler () {
let handler = [
{
method: ['GET'],
path : `/APPNAME/develop`,/* rep APPNAME wiht 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.
Install http-proxy-middleware and add this file to your application src directory. 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,
})
);
};
Add this dev.html file to the public directory. Replace APPNAME with the name of your app(ex: ORAPP)
<!DOCTYPE html>
<!--
~ /* ------------------------------------------------------------------------------------
~ * Copyright (c) SAS Institute Inc.
~ * Licensed under the Apache License, Version 2.0 (the "License");
~ * you may not use this file except in compliance with the License.
~ * You may obtain a copy of the License at
~ *
~ * http://www.apache.org/licenses/LICENSE-2.0
~ *
~ * Unless required by applicable law or agreed to in writing, software
~ * distributed under the License is distributed on an "AS IS" BASIS,
~ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
~ * See the License for the specific language governing permissions and
~ * limitations under the License.
~ ----------------------------------------------------------------------------------------*/
~
-->
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- App specific functions -->
<script type="text/javascript" src="/APPNAME/appenv"></script>
<script type="text/javascript" src="/APPNAME/user"></script>
<script>
function setup() {
document.getElementById('head').innerHTML= `Hi ${USER_NAME}. Now run npm start to develop and test your app.`;
let url = `${window.location.protocol}//${window.location.host}/${LOGONPAYLOAD.appName}/develop`;
window.location.replace(url);
}
</script>
</head>
<body onload="setup()">
<h1 id="head"></h1>
</body>
</html>
- Make a copy of your env file and name it dev.env.
- Change the APPENTRY to dev.html
update your package.json file to have this script.
"dev": "node dev --env=dev.env --docker=Dockerfile --appenv=appenv.js",