Update NPM scripts to allow usage in Windows (#744)

Author: timmydoza

package.json

@@ -86,7 +86,7 @@
   },
   "scripts": {
     "postinstall": "rimraf public/virtualbackground && copyfiles -f node_modules/@twilio/video-processors/dist/build/* public/virtualbackground",
-    "start": "npx cross-env REACT_APP_VERSION=$(node -e \"console.log(require('./package.json').version)\") concurrently npm:server npm:dev",
+    "start": "concurrently npm:server npm:dev",
     "dev": "react-scripts start",
     "build": "node ./scripts/build.js",
     "test": "cross-env TZ=utc jest --config jest.config.js",

scripts/build.js

@@ -40,7 +40,6 @@ class Filter extends Transform {
 
 // Colors normally don't work when using spawn(), so here we re-enable colors.
 process.env.FORCE_COLOR = require('supports-color').stdout.level;
-process.env.REACT_APP_VERSION = require(__dirname + "/../package.json").version
 
 const buildProcess = spawn('node', [require.resolve('react-scripts/scripts/build')]);
 

src/components/AboutDialog/AboutDialog.test.tsx

@@ -5,6 +5,7 @@ import { useAppState } from '../../state';
 
 jest.mock('twilio-video', () => ({ version: '1.2', isSupported: true }));
 jest.mock('../../state');
+jest.mock('../../../package.json', () => ({ version: '1.3' }));
 
 const mockUseAppState = useAppState as jest.Mock<any>;
 mockUseAppState.mockImplementation(() => ({ roomType: undefined }));

src/components/AboutDialog/AboutDialog.tsx

@@ -6,6 +6,7 @@ import DialogContent from '@material-ui/core/DialogContent';
 import DialogContentText from '@material-ui/core/DialogContentText';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import Divider from '@material-ui/core/Divider';
+import packageJSON from '../../../package.json';
 
 import Video from 'twilio-video';
 import { useAppState } from '../../state';
@@ -24,7 +25,7 @@ function AboutDialog({ open, onClose }: PropsWithChildren<AboutDialogProps>) {
       <DialogContent>
         <DialogContentText>Browser supported: {String(Video.isSupported)}</DialogContentText>
         <DialogContentText>SDK Version: {Video.version}</DialogContentText>
-        <DialogContentText>App Version: {process.env.REACT_APP_VERSION}</DialogContentText>
+        <DialogContentText>App Version: {packageJSON.version}</DialogContentText>
         <DialogContentText>Deployed Tag: {process.env.REACT_APP_GIT_TAG || 'N/A'}</DialogContentText>
         <DialogContentText>Deployed Commit Hash: {process.env.REACT_APP_GIT_COMMIT || 'N/A'}</DialogContentText>
         {roomType && <DialogContentText>Room Type: {roomType}</DialogContentText>}