Web Architecture

Dependencies

The main components for the web are: TypeScript, react v16, react router v4, and redux. If you don't know what any of these are check out the linked docs, they're great.

Additionally, we use nifty tools like moment.js for dates, query-string for handling query strings in service requests, and classnames for conditionally building out classes for HTML elements.

When running the app locally we use webpack v4 for bundling the application, webpack-dev-server for serving it (hot) on localhost:8080, debounce for managing the number of requests a component can make in a given time, and mockserver for mocking out any service requests made by the FE.

We are using commit hooks. Meaning, when you to commit and push changes to the code we will run eslint and the TypeScript build command to make sure the code you wrote isn't broken. You'll thank us later, trust me, but if you like the wild west then you can turn this off by removing the pre-commit block from our package.json file in the root directory.

Lastly, we use the serverless.yml and buildspec.yml files in the root of the application to deploy it to AWS. We'll cover the details of these files later on.

List of most important Dependencies:

"classnames": "^2.2.6",
"debounce": "^1.2.0",
"moment": "^2.24.0",
"query-string": "^6.5.0",
"react": "^16.8.6",
"react-dom": "^16.8.6",
"react-hot-loader": "^4.8.4",
"react-redux": "^7.0.3",
"react-router-dom": "^5.0.0",
"redux": "^4.0.1",
"redux-actions": "^2.6.5",
"redux-thunk": "^2.3.0",
"typescript": "^3",
"uuid": "^3.3.3",
"webpack": "^4.30.0"

NOTE: To see all dependencies used check out the package.json file in the root directory of the web repository.

Folder Structure

public/
  index.html
  manifest.json
server/
  mocks/
    [paths/to/mocked/services]
  index.js
src/
  assets/
  components/
  constants/
  mappers/
  models/
  redux/
  services/
  setup/
  styles/
  utils/
  index.tsx
  serviceWorker.ts
webpack/
  webpack.config.base.js
  webpack.config.[env].js
serverless.yml
buildspec.yml

Commands

If you want to quickly see a list of commands that you can run for the web code just take a look at the package.json file in the root directory. You'll find all the possible commands under the scripts block.

Run Build

yarn build

This command will run TypeScript build on the src directory, and output all the files in to a build directory. This command is primarily run to make sure the code isn't broken, and to transpile the code for when you deploy the application to your AWS S3 bucket.

Run Linters

yarn lint

This command will run all linters on the code. This is used too make sure that there are no general JavaScript, TypeScript, and/or React issues in the code. This command is run when committing, and building the code.

Run Web Code

yarn start:web

This command will run webpack and webpack-dev-server, using the hot reload functionality, and serve the site on localhost:8080. What that means for you is as you change the code locally you should see the website change at localhost:8080.

Additionally, if you have the redux extension for Chrome (which we recommend) you should be able to see all the state changes and updates since we setup the extension in our code for local and dev environments.

Run Mock Server

yarn start:server

This command will run the mock server. The server will run on localhost:9001. Any requests made by the website, that are covered by the mockserver code, will be intercepted and handled.

NOTE: You will need to run both yarn start:web and yarn start:server in order for the application to run locally.