Frontend: Node

The frontend will be written in Typescript, so we need Node installed to run it. To install node,

Run this command in any location

brew install node

which installed Node 16.2.0.

As with Python brew doesn't know how to install javascript/typescript packages fortunately node comes with npm which is the default pacakge manager for JS/TS.

Creating a React App

As with the backend we'll separate the frontend code into a frontend folder but we'll use the create react app tool to set everything up by running this command in the project directory,

Run this command in tozo/

npx create-react-app frontend --template typescript

which should give the following folder structure,

tozo
├── backend
│   └── ...
└── frontend
    ├── .gitignore
    ├── README.md
    ├── node_modules
    ├── package.json
    ├── package-lock.json
    ├── tsconfig.json
    ├── public
    │   ├── favicon.ico
    │   ├── index.html
    │   ├── logo192.png
    │   ├── logo512.png
    │   ├── manifest.json
    │   └── robots.txt
    └── src
        ├── App.css
        ├── App.tsx
        ├── App.test.tsx
        ├── index.css
        ├── index.tsx
        ├── logo.svg
        ├── react-app-env.d.ts
        ├── reportWebVitals.ts
        └── setupTests.js

only the package.json, package-lock.json, tsconfig.json, .gitignore, react-app-env.d.ts, and index.html files matter at the moment, so you can delete or adapt the other files as you'd like.