This is a starting point template for a web ui that uses the React, Express, TypeScript technology stack, and aims to be "clone and go" ready for use with each merge to master.
We try to employ a "Development Environment as Code" approach to ensure one can "clone and go" without any manual environment setup.
The development environment is constituted by one or more docker containers, whose images contain all the dependencies needed to run the typescript build, webpack, and express web server processes.
To begin development and view the current website, after cloning the repo, from the project root, run:
./ci dev:environment:runEverything
Before handing control of the dev environment off to docker, this command first ensures your workstation has a compatible, isolated docker runtime environment.
Once ready, a browser window will be opened, showing the latest build of the site.
Code changes are watched, and the development environment automatically refreshes to reflect the latest changes.
The typescript compilation, webpack, and express web server processes each produce logs. In development mode, these logs are written to the logs folder. Feel free to tail the logs or open them in your favorite IDE to understand what is happening if the development environment appears to be giving you any trouble.
To get an interactive shell within the development environment, run:
dev:environment:bash
When finished working, clean up the development environment by running:
dev:environment:stopEverything
- Add Material Design: https://www.material-ui.com/#/get-started/installation
- IDE as code with typescript-enabled Cloud9
- Dist folders are duplicated somehow by webpack
- Single-Line Install & Run Dockerized Build and Dev Environment for Mac
- Hello World React Webpage running in Express