Development

Development#

Make#

The main utility for all development within this repository is the Makefile. This is used as a tool accessed simply by opening the repository within a shell, preferably bash or terminal, and typing make. This produces the default help command that should be of further use.

Helpful Commands:

  1. make npminstall: Install NPM packages locally as defined within ./package.json

  2. make npmbuild: Run npm build to execute script as defined within ./package.json

  3. make npmwatch: Run npm watch to execute script as defined within ./package.json

  4. make npmbuild_devenv: Run npm build within devenv Docker container as described within ./devop/devenv/Dockerfile

  5. make npmwatch_devenv: Run npm watch within devenv Docker container as described within ./devop/devenv/Dockerfile

  6. make bash_devenv: Start devenv Docker container and connect to bash(Note: This is a full development environment with this repository mapped to /src/metacrud2)

  7. make dev.exact.engineering: Start dev.exact.engineering Docker container as described in ./devop/dev.exact.engineering/Dockerfile

NPM#

NPM is a common tool that should be familiar. All compiling steps aside from clean should be driven by NPM but still utilizing make to ensure that a single development scripting tool is maintained. The primary commands are to be npm install, npm run build, and npm run watch. These commands should always be maintained and working on Debian and Mac OS X. There is no development server within NPM without exception.

Webpack#

Webpack is used within the project to manage the compilation of applications that utilize both React and TypeScript with uniformity.

./webpack.config.js is the single webpack configuration file used within this project in order to maintain this and is always called through NPM which is always called through Make regardless of if it is run on the host system directly or within the development Docker contianer environment.

Please note that since this repository contains multiple applications, the webpack contains a single entrypoint for each application, an HtmlWebpackPlugin for each application, and an output that contains a variable to handle these conventions.

Also, please note that an alias section exists within the resolve section to maintain path alias’ intended to be reusable throughout multiple applications.

TypeScript#

TypeScript is used within the project for various reasons and as such a single ./tsconfig file is maintained to ensure consistency between all applications. The main note within this is that any path alias’ referenced within the Webpack configuration must be duplicated within this file.

Note that the paths are relative from the baseUrl of ‘./public’.

Docker Container: Development Environment#

A Docker container is defined within ./devop/devenv that contains everything to produce a development environment with the is repository mapped to /src/metacrud2 per normal Linux conventions. See the help instructions within make to launch a bash shell within this environment in leui of using shell on a local system if it is preferred. This environment is always maintained.

The goal of this is that a developer, regardless of host system, dependencies, etc., would be able to open this repository, install Docker, start a terminal, run a make command, and have a terminal to run commands in an identical, disposable development environment consistent as much as possible with any other developer.

Docker Container: dev.exact.engineering#

A docker container is defined within ./devop/dev.exact.engineering that hosts an nginx web server hosting /var/www/html/… at port 80 without ssl.

This is mapped to be accesible to the developer’s host computer at port 82 and also via an embedded cloudflared application at dev.exact.engineering but only available to select developers to aid in the ability to preview the exact.engineering site that is currently in development.