Update template and dependencies for ServiceMax

Created by: ericsvmx

This PR is to implement a "hello world" template with extra libraries and conventions for ServiceMax. Goal is to show how these conventions work in practice. In addition to the basic create-react-app template:

• Redux
• SASS
• React Router

packages/react-scripts/config/jest/babelTransform.js

@@ -13,4 +13,9 @@ const babelJest = require('babel-jest');
 module.exports = babelJest.createTransformer({
   presets: [require.resolve('babel-preset-react-app')],
   babelrc: false,
+  plugins: [
+    ['module-resolver', {
+      root: ['./src']
+    }]
+  ],
 });

packages/react-scripts/config/webpack.config.dev.js

@@ -166,6 +166,7 @@ module.exports = {
           /\.gif$/,
           /\.jpe?g$/,
           /\.png$/,
+          /\.scss$/,
         ],
         loader: require.resolve('file-loader'),
         options: {
@@ -192,6 +193,11 @@ module.exports = {
           // @remove-on-eject-begin
           babelrc: false,
           presets: [require.resolve('babel-preset-react-app')],
+          plugins: [
+            ['module-resolver', {
+              root: ['./src']
+            }]
+          ],
           // @remove-on-eject-end
           // This is a feature of `babel-loader` for webpack (not Babel itself).
           // It enables caching results in ./node_modules/.cache/babel-loader/
@@ -205,7 +211,7 @@ module.exports = {
       // In production, we use a plugin to extract that CSS to a file, but
       // in development "style" loader enables hot editing of CSS.
       {
-        test: /\.css$/,
+        test: /\.scss$/,
         use: [
           require.resolve('style-loader'),
           {
@@ -214,6 +220,7 @@ module.exports = {
               importLoaders: 1,
             },
           },
+          require.resolve('sass-loader'),
           {
             loader: require.resolve('postcss-loader'),
             options: {

packages/react-scripts/config/webpack.config.prod.js

@@ -165,6 +165,7 @@ module.exports = {
           /\.gif$/,
           /\.jpe?g$/,
           /\.png$/,
+          /\.scss$/,
         ],
         loader: require.resolve('file-loader'),
         options: {
@@ -190,6 +191,11 @@ module.exports = {
         options: {
           babelrc: false,
           presets: [require.resolve('babel-preset-react-app')],
+          plugins: [
+            ['module-resolver', {
+              root: ['./src']
+            }]
+          ],
         },
         // @remove-on-eject-end
       },
@@ -206,7 +212,7 @@ module.exports = {
       // use the "style" loader inside the async code so CSS from them won't be
       // in the main CSS file.
       {
-        test: /\.css$/,
+        test: /\.scss$/,
         loader: ExtractTextPlugin.extract(
           Object.assign(
             {
@@ -220,6 +226,12 @@ module.exports = {
                     sourceMap: true,
                   },
                 },
+                {
+                  loader: require.resolve('sass-loader'),
+                  options: {
+                    sourceMap: true,
+                  },
+                },
                 {
                   loader: require.resolve('postcss-loader'),
                   options: {

packages/react-scripts/scripts/init.js

@@ -35,7 +35,8 @@ module.exports = function(
   )).name;
   const ownPath = path.join(appPath, 'node_modules', ownPackageName);
   const appPackage = require(path.join(appPath, 'package.json'));
-  const useYarn = fs.existsSync(path.join(appPath, 'yarn.lock'));
+  // ServiceMax Note: we prefer npm, for now
+  const useYarn = false; //fs.existsSync(path.join(appPath, 'yarn.lock'));
 
   // Copy over some of the devDependencies
   appPackage.dependencies = appPackage.dependencies || {};
@@ -47,6 +48,8 @@ module.exports = function(
     build: 'react-scripts build',
     test: 'react-scripts test --env=jsdom',
     eject: 'react-scripts eject',
+    lint: 'NODE_ENV=development eslint js test *.js',
+    prettier: 'NODE_ENV=development prettier-eslint --write \"src/**/*.js\"',
   };
 
   fs.writeFileSync(
@@ -125,8 +128,9 @@ module.exports = function(
   // Install react and react-dom for backward compatibility with old CRA cli
   // which doesn't install react and react-dom along with react-scripts
   // or template is presetend (via --internal-testing-template)
-  if (!isReactInstalled(appPackage) || template) {
-    console.log(`Installing react and react-dom using ${command}...`);
+  // ServiceMax Note: always do this because we need template dependencies
+  if (true || !isReactInstalled(appPackage) || template) {
+    console.log(`Installing template dependencies using ${command}...`);
     console.log();
 
     const proc = spawn.sync(command, args, { stdio: 'inherit' });

packages/react-scripts/template/public/index.html

@@ -19,7 +19,7 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>ServiceMax</title>
   </head>
   <body>
     <noscript>