Fix missing npm dependencies and webpack failure

.vscode/settings.json

@@ -11,6 +11,5 @@
 },
 "terminal.integrated.env.windows": {
     "SFDX_SET_CLIENT_IDS": "sfdx-vscode"
-},
-"eslint.nodePath": "/Users/jonas/.vscode/extensions/salesforce.salesforcedx-vscode-lwc-45.5.0/node_modules"
+}
 }

README.md

@@ -92,9 +92,9 @@ [email protected]
 
 ## DEVELOPMENT
 
-1. Deploy your application by running `npm run deploy-dev` or `npm run deploy-scratch`. This step needs to happen whenever the contents of `force-app` change.
-2. run `npm start`
-3. Enable the `Allow Insecure Localhost` setting in chrome (chrome://flags/#allow-insecure-localhost). If you don't want to enable this, or use a different browser, you can create your own self-signed certificate by following [these instructions](https://github.com/ChuckJonas/bad-ass-salesforce-stack/blob/master/config/cert/readme.md).
+1. Create your own self-signed certificate by following [these instructions](https://github.com/ChuckJonas/bad-ass-salesforce-stack/blob/master/config/cert/readme.md). (This only needs to be done once)
+2. Deploy your application by running `npm run deploy-dev` or `npm run deploy-scratch`. This step needs to happen whenever the contents of `force-app` change.
+3. run `npm start`
 4. navigate to your page in salesforce: EG: `/apex/app`
 5. append `?local=1` to page query string
 6. Start coding. Your app will automatically update as you save changes.

app/app.tsx

@@ -1,18 +1,17 @@
-import { Card, Drawer, Button } from 'antd';
-import { hot } from 'react-hot-loader'; // needs to be before react!
-import * as React from 'react';
-import { Account } from '@src/generated';
+import { Card, Drawer, Button } from "antd";
+import { hot } from "react-hot-loader"; // needs to be before react!
+import * as React from "react";
+import { Account } from "@src/generated";
 
 // example use of file loader to load image
-import bassLogo from '@src/assets/images/bass-logo.jpg';
+import bassLogo from "@src/assets/images/bass-logo.jpg";
 
 interface AppState {
   acc: Account;
   drawerVisible: boolean;
 }
 
 class App extends React.Component<{}, AppState> {
-
   constructor(props: any) {
     super(props);
     this.state = {
@@ -26,10 +25,10 @@ class App extends React.Component<{}, AppState> {
     const accs = await Account.retrieve((fields) => {
       return {
         select: [
-          ...fields.select('id', 'name', 'website'),
-          fields.subQuery('contacts', (cFields) => {
+          ...fields.select("id", "name", "website"),
+          fields.subQuery("contacts", (cFields) => {
             return {
-              select: cFields.select('id', 'name', 'email', 'phone'),
+              select: cFields.select("id", "name", "email", "phone"),
             };
           }),
         ],
@@ -43,18 +42,23 @@ class App extends React.Component<{}, AppState> {
 
   public render() {
     return (
-      <Card title='B.A.S.S.'>
+      <Card title="B.A.S.S.">
         <Drawer
           visible={this.state.drawerVisible}
-          onClose={() => this.setState({drawerVisible: false})}
-          title='An Account'
+          onClose={() => this.setState({ drawerVisible: false })}
+          title="An Account"
           width={600}
         >
           {this.state.acc && this.renderDrawerContent()}
         </Drawer>
         <img width={300} src={bassLogo} />
         <br />
-        <Button type='primary' onClick={() => this.setState({drawerVisible: true})}>Click Me!</Button>
+        <Button
+          type="primary"
+          onClick={() => this.setState({ drawerVisible: true })}
+        >
+          Click Me!
+        </Button>
       </Card>
     );
   }
@@ -64,23 +68,33 @@ class App extends React.Component<{}, AppState> {
 
     const contactsList = acc.contacts.map((c) => {
       return (
-        <Card type='inner' key={c.id}>
-          <p><b>Name:</b> {c.name}</p>
-          <p><b>Email:</b> {c.email}</p>
-          <p><b>Phone:</b> {c.phone}</p>
+        <Card type="inner" key={c.id}>
+          <p>
+            <b>Name:</b> {c.name}
+          </p>
+          <p>
+            <b>Email:</b> {c.email}
+          </p>
+          <p>
+            <b>Phone:</b> {c.phone}
+          </p>
         </Card>
       );
     });
     return (
       <div>
-        <p><b>Name:</b> {acc.name}</p>
-        <p><b>Website:</b> {acc.website}</p>
-        <Card title='Contacts' extra={acc.contacts.length}>
+        <p>
+          <b>Name:</b> {acc.name}
+        </p>
+        <p>
+          <b>Website:</b> {acc.website}
+        </p>
+        <Card title="Contacts" extra={acc.contacts.length}>
           {contactsList}
         </Card>
       </div>
     );
-  }
+  };
 }
 
 export default hot(module)(App);

app/types.d.ts

@@ -3,6 +3,6 @@ interface System {
 }
 declare var System: System;
 
-//allow importing of files with file-loader
+//declare any necessary imported file types
 declare module '*.png'
 declare module '*.jpg'

config/babelrc.json

@@ -1,22 +1,29 @@
 {
-  "presets": [
-      "@babel/env",
-      "@babel/typescript",
-      "@babel/react"
-
-  ],
-  "plugins": [
-      ["@babel/plugin-proposal-decorators", { "legacy": true }],
-      ["react-hot-loader/babel"],
-      [
-          "import",
-          {
-              "libraryName": "antd",
-              "style": true,
-              "libraryDirectory": "es"
-          }
-      ],
-      ["@babel/plugin-proposal-class-properties", { "loose": true }],
-      ["@babel/proposal-object-rest-spread"]
-  ]
-}
+    "presets": [
+        "@babel/env",
+        "@babel/typescript",
+        "@babel/react"
+    ],
+    "plugins": [
+        [
+            "@babel/plugin-proposal-decorators",
+            {
+                "legacy": true
+            }
+        ],
+        [
+            "react-hot-loader/babel"
+        ],
+        [
+            "import",
+            {
+                "libraryName": "antd",
+                "style": true,
+                "libraryDirectory": "es"
+            }
+        ],
+        [
+            "@babel/proposal-object-rest-spread"
+        ]
+    ]
+}

config/cert/readme.md

@@ -1,7 +1,7 @@
 # Trusting Localhost
 
-For cases where you cannot `Allow Insecure Localhost` (or aren't using chrome):
+These steps allow your computer to trust the app we are displaying from localhost:
 
 1. run `openssl req -x509 -newkey rsa:4096 -sha256 -days 3650 -nodes -keyout ./config/cert/server.key -out ./config/cert/server.crt -extensions san -config ./config/cert/dev.conf`
-2. in "package.json" update the  `npm start` with `--cert ./config/cert/server.crt --key ./config/cert/server.key`
-3. install the newly created cert `config/cert/server.crt` in [keychain and set trust to "Always"](https://www.youtube.com/watch?v=TGrX8XgSuZ4)
+2. in "package.json" update the `npm start` with `--cert ./config/cert/server.crt --key ./config/cert/server.key`
+3. install the newly created cert `config/cert/server.crt` in [keychain and set trust to "Always"](https://www.youtube.com/watch?v=TGrX8XgSuZ4)

config/webpack.config.ts

@@ -39,21 +39,18 @@ module.exports = (env: any = {}) => {
 
   const devServer: webpackDevServer.Configuration = {
     historyApiFallback: true,
-    overlay: true,
     port: PORT,
     headers: { // enable CORS
       'Access-Control-Allow-Origin': '*',
       'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
       'Access-Control-Allow-Headers': 'X-Requested-With, content-type, Authorization',
     },
-    disableHostCheck: true,
   };
 
   const config: webpack.Configuration = {
     mode,
     cache: true,
     devtool: isBuild ? 'source-map' : 'source-map',
-    devServer,
     context: PATHS.root,
     entry: {
       app: [
@@ -116,13 +113,13 @@ module.exports = (env: any = {}) => {
           use: [
             { loader: 'style-loader' },
             { loader: 'css-loader' },
-            {
-              loader: 'less-loader',
+            {loader: 'less-loader',
               options: {
-                modifyVars: themeVariables,
-                javascriptEnabled: true,
-              },
-            },
+              lessOptions:{
+              javascriptEnabled: true,
+              modifyVars: themeVariables,
+              }
+          }},
           ],
         },
         // json
@@ -133,27 +130,15 @@ module.exports = (env: any = {}) => {
         },
         // images
         {
-          test: /\.(jpg|jpeg|png|gif|svg)$/,
+          test: /\.(png|svg|jpg|jpeg|gif)$/i,
+          type: 'asset/resource',
           include: [PATHS.assets],
-          use: {
-            loader: 'file-loader',
-            options: {
-              name: '[path][hash].[ext]',
-            },
-          },
         },
         // fonts
         {
-          test: /\.(woff|woff2|ttf|eot)$/,
-          include: [
-            PATHS.assets,
-          ],
-          use: {
-            loader: 'file-loader',
-            options: {
-              name: 'fonts/[name].[hash].[ext]',
-            },
-          },
+          test: /\.(woff|woff2|eot|ttf|otf)$/i,
+          type: 'asset/resource',
+          include: [PATHS.assets],
         },
       ],
     },
@@ -163,9 +148,6 @@ module.exports = (env: any = {}) => {
       ...[
         new webpack.DefinePlugin(GLOBAL_DEFINES),
       ],
-      ...(!isBuild ? [
-        new webpack.NamedModulesPlugin(),
-      ] : []),
       ...(isProd ? [
         // put production optimization plugins here
       ] : []),