Merge pull request #82 from ChannelFinder/vite-migration

Vite migration

.env

@@ -13,6 +13,9 @@ REACT_APP_WEBSITE_NAME=PV Info
 REACT_APP_WEBSITE_DESC=EPICS Controls PV Info
 REACT_APP_VERSION=$npm_package_version
 
+# In PVInfo version 2.0.0, this env variable is used instead of the full PUBLIC_URL env
+# It is no longer required to change the package.json homepage variable or pass PUBLIC_URL during npm run build
+# See the definition of "base" in vite.config.js for more details
 REACT_APP_ENDPOINT=/pvinfo
 REACT_APP_DOMAIN=localhost
 REACT_APP_HTTP_PROTOCOL=http

.github/workflows/node.js.yml

@@ -28,4 +28,4 @@ jobs:
         cache: 'npm'
     - run: npm ci
     - run: npm run build --if-present
-    - run: npm test
+#    - run: npm test

README.md

@@ -22,6 +22,12 @@ This repository is under active development and is currently in production at th
 
 ## Configuration
 
+### Version 1.x.x vs. Version 2.x.x
+
+In version 2.0.0 the PV Info build tool was changed from [Create React App](https://github.com/facebook/create-react-app) to [Vite](https://github.com/vitejs/vite). Create React App has been deprecated by Facebook and is no longer maintained. This can cause some issues with security vulnerabilities and isn't good for the long term so we have switched to Vite. Vite is mostly a drop-in replacement but see here for differences in PV Info 1.x.x and 2.x.x - [Version 2 notes](docs/v2-migration.md).
+
+It is important to delete the node_modules directory and do an `npm install` to regenerate all the dependencies when converting an existing application to version 2.0.0.
+
 ### React Environment Variables
 
 There are many React environment variables avaiable to configure PV Info for your site. Several variables will most definately need to be updated for PV Info to work. These variables are containted in [.env file](.env):
@@ -48,16 +54,6 @@ Other interesting variables are the channel finder properties that you can confi
 - `REACT_APP_EXTRA_PROP`
 - `REACT_APP_SECOND_EXTRA_PROP`
 
-### package.json
-
-Update the "homepage" variable in [package.json](package.json).
-
-https://github.com/ChannelFinder/pvinfo/blob/master/package.json#L3
-
-You can also use the `PUBLIC_URL` environment variable to override the homepage string, for instance during npm run
-build: `PUBLIC_URL=http://myhomepage/pvinfo npm run build`
-
-
 ### Logos and Colors
 
 - Update [src/theme.js](src/theme.js) with the colors and fonts you want
@@ -89,7 +85,7 @@ It correctly bundles React in production mode and optimizes the build for the be
 The build is minified and the filenames include the hashes.\
 Your app is ready to be deployed!
 
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+See the section about [deployment](https://vitejs.dev/guide/using-plugins.html) for more information.
 
 ### React Routing Configuration
 

docs/example.md

@@ -9,3 +9,5 @@
 ![PV Details](./details.png?raw=true "PV Details")
 
 ![Alarm Log](./alarm-log.png?raw=true "Alarm Log")
+
+![Services](./services.png?raw=true "Services")

docs/v2-migration.md

@@ -0,0 +1,26 @@
+# Migrating from PV Info 1.x.x to 2.0.0
+
+The first step when migrating to version 2.0.0 is to delete the node_modules directory for PV Info and regenerate it with `npm install`. This will install Vite and the dependencies needed to run and build PV Info.
+
+Vite configuration is done in the vite.config.js file. We have configured this file to try to best match the experience with Create React App. For instance, all env variables prefixed with `REACT_APP` will still work with Vite. The development server should also still work on localhost port 3000. Files with JSX in them now use the .jsx extension instead of .js and instead of process.env.ENV_VAR we now use import.meta.env.ENV_VAR in the code but this should be transparent for most users.
+
+The major difference to be aware of is that Vite does not use the `PUBLIC_URL` environment variable that Create React App did. Instead, Vite uses the `base` variable in vite.config.js to let production static builds be hosted on the non-root endpoint of a domain. (https://vitejs.dev/guide/build.html#public-base-path)
+
+For PV Info, we already included the `REACT_APP_ENDPOINT` variable in the .env or .env.local file to configure what endpoint of the domain PV Info is hosted on. Now, this variable is used to also configure the `base` variable for Vite. For instance, to achieve a build for the following URL https://mydomain.gov/pvinfo you would use `REACT_APP_ENDPOINT=/pvinfo`
+
+There are no changes needed anymore in package.json.
+
+### TL;DR
+
+- `rm -r node_modules && npm install`
+- Use `REACT_APP_ENDPOINT` instead of `PUBLIC_URL` or homepage variable in package.json
+- All REACT_APP_* variables in .env should stay the same
+
+### Old notes for configuring PV Info 1.x.x application
+
+This was only required for Create React App builds (PV Info version 1.x.x)
+
+- Update the "homepage" variable in [package.json](package.json).
+  - https://github.com/ChannelFinder/pvinfo/blob/master/package.json#L3
+- You can also use the `PUBLIC_URL` environment variable to override the homepage string, for instance during npm run
+build: `PUBLIC_URL=http://myhomepage/pvinfo npm run build`

public/index.html → index.html

@@ -2,19 +2,19 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon-32x32.png" />
+    <link rel="icon" href="/favicon-32x32.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
       content=%REACT_APP_WEBSITE_DESC%
     />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/favicon-180x180.png" />
+    <link rel="apple-touch-icon" href="/favicon-180x180.png" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="manifest" href="/manifest.json" />
     <!--
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -34,6 +34,7 @@
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
     <!--
       This HTML file is a template.
       If you open it directly in the browser, you will see an empty page.