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 @@ prod_alias=john@acme.com
 
 ## 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
  ] : []),