bidder-react

bidder-react

the new and improved bidder-react and stuff getting better and better

Webpack alias

This repo takes advantage of a webpack alias, where you may see many imports that simply start with @

These @ imports are just aliased to be the root /src/ folder of the build. If you see @/redux, the true path is bidder-react/src/redux

Example:

// Before
import { BidIncrement } from '../../../types/BidIncrement';
// After
import { BidIncrement } from '@/types/BidIncrement';

Try to use this alias whenever reasonable, a good rule of thumb is if you will use a ../ use the @ alias

To run

• Log in to NPM (Your npm account is in the liveauctioneers npm org, right?)
  npm login

• Install NPM dependencies
  npm install

• For initial development, run the build on stage environment: npm run dev or npm run stage

• For pre-release testing on live data, run the build on preprod environment: npm run preprod - you have been further cautioned: this is a live data environment

• For custom environment testing, export DEPLOYMENT variable: (Windows) $Env:DEPLOYMENT="barako"
  (Not Windows) export DEPLOYMENT=barako run npm run local which will use DEPLOYMENT from environment

Weird things with the build

Because of the way we build webpack, sometimes when you start the dev server, it will serve the previous build until the new build is completed.
You might see errors about packages that have recently been removed, not being found (since they were removed).
The easiest way to fix this is to clean the build folders with npm run clean.

If things are acting weird, it is always safe to remove the node_modules folder and the package-lock.json file and reinstall the dependencies.
rm -rf node_modules
rm -rf package-lock-json
npm i

If you update your Node major version, the local node-sass library will need to be updated before npm run dev will work. To fix this, run npm rebuild node-sass

Profiling

On all non production builds (not on master), react profiling is available. https://reactjs.org/blog/2018/09/10/introducing-the-react-profiler.html

Basic Usage

Open up developer tools with the latest version of react dev tools extension, and go to the "Profiler" tab. Hit "Start Profiling" at the top left, do any action, and then press the same button to stop recording.
You can also press the reload symbol next to the start profiling button to refresh the page and immediately start profiling (only available on chrome version of react dev tools)

Tips

If you press the gear icon near the top right of the developer tools when in the "Profiler" tab, and then switch to the "Profiler" tab inside the new options window, you can hide commits (page updates) below a certain threshhold, 2ms being a good starting setting on a fast computer.

If profiling suddenly becomes unavailable, close and reopen dev tools to make the issue go away (you may also need to refresh).

Solving MinifiedJS complications

While profiling works very well with non-minified test builds on local development environments, the minified versions on built webpages can pose problems.
To identify a component on the profiler tab when minified, follow these steps:

• Select the component so options above it are greyed out

• Switch tabs in developer tools to Components

• Mouse over and highlight the component, which in turn highlights it on the webpage.

Things that make our site complicated

SSR

We do SSR

Whitelabel

The entire site needs to be addressable from any subdomain of liveauctioneers.com (*.liveauctioneers.com). The index (Home) page of each domain will change depending on which domain is used to access the site.

To test on local, point the auction house you want to test with to localhost in your hosts file (/etc/hosts on unix and system32/drivers/etc/hosts on windows):

127.0.0.1      test-450-auction-house.liveauctioneers.com

Then just visit the url with the port of bidder-react: test-450-auction-house.liveauctioneers.com:3443 (Make sure you run npm run stage locally)

To test on stage follow the similar pattern as above with a few differences:

• Push bidder-react changes to stage
• Change the IP to point to the stage environment's IP

Here is an article to help configure your hosts file without running into cache issues: https://setapp.com/how-to/edit-mac-hosts-file

basename

The entire site needs to be addressabled at either /* or /en-gb/* to facilitate our uk users. All pages of the site need to be routable and navigations must stay within the subpath.

Helpful tools and commands

Reduce redux server logging noise

You can toggle the redux client and server loggers in the create.js file.

Simply toggle the booleans in the createLogger function as appropriate.

middleware.push(createLogger({ client: true, server: false }));

cross-env

npm i -g cross-env

Webpack bundle analyzer

npm i --no-save webpack-bundle-analyzer npx cross-env NODE_ENV=production webpack --colors --display-error-details --config config/webpack/client.analyzer.js

Webpack bundle duplicate check

npm i --no-save duplicate-package-checker-webpack-plugin npx cross-env NODE_ENV=production webpack --colors --display-error-details --config config/webpack/client.dupCheck.js

npm-check

npm i -g npm-check npm-check

Lighthouse

npm i --no-save lighthouse npm run dev npx cross-env LIGHTHOUSE_CHROMIUM_PATH=$(which google-chrome) lighthouse http://localhost:3000 --view

Webpack full output

npx webpack --colors --display-error-details --config config/webpack/client.prod.js --profile --json > compilation-stats.json

Add cert for local ssl

https://www.akadia.com/services/ssh_test_certificate.html While in the project's directory: mkdir sslcert
cd sslcert

Generate a Private Key

• mac: openssl genrsa -des3 -out server.key 2048
• windows: winpty openssl genrsa -des3 -out server.key 2048

Generate a CSR

• mac: openssl req -new -key server.key -out server.csr
• windows: winpty openssl req -new -key server.key -out server.csr
• specify just localhost as your common name for best results; do not specify port

Remove Passphrase from Key

First copy the key

• cp server.key server.key.org

Then remove the passpharase from the key

• mac: openssl rsa -in server.key.org -out server.key
• windows: winpty openssl rsa -in server.key.org -out server.key

Generate cert

• mac: openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt
• windows: winpty openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

Import the certificate

The generated certificate must be imported as a trusted root certificate:

• In Google Chrome, enter chrome://settings/security?search=manage+certificates in the URL bar
• Select Manage certificates -> import your generated certificate into Trusted Root Certification Authorities
• Restart your dev server if it was running
• Unlock ports for use with the certificate in Chrome by visting these urls:
  • https://localhost:3000 and/or https://localhost:3001 and bypass the certificate warning, this unlocks the local bundler delivery over SSL
  • https://localhost:3443 and bypass the certificate warning, the LiveAuctioneers main page should load without errors
• When bypassing the certificate warning, if you do not see "proceed to website" after clicking "Advanced", simply type "thisisunsafe" on the page.
• Only after the previous step, navigate to https://localdev.liveauctioneers.com:3443/ to get cookie support across API services locally
• Chrome may periodically require you to generate a new certificate or require you to repeat steps the previous 2 steps.

Cypress

See docs at ./cypress/README.md