Code Template R

A name I made up on the spot. A Frankenstein React base code template to build Web Apps, Mobile Apps, and FaaS in a Mono Repo. This is a WIP Project

Philosophy (TODO: WIP, flesh out philosophies in further details, including the whys, elaborate bullet points)

This repository is meant to scaffold applications quickly for web, mobile, and micro services. The initial repository is not intended to be long term projects, but push applications out to market faster while considering business optimizations. Given if the scalability and business rules meet, then obviously this can be stayed in as a mono repo. If not, then the design (TODO) of this repository should allow you to break out of a mono repo and into individual repositories. What I try and hope to do is add specific and opinionated engineering practices to this repository.

Features

Features should be fully discussed (Business requirements and Architecture Designed) and written into the tracking system. This repository heavily uses Github Issues and Projects to leverage that.

Bug Fixing

Issues should have OS, Browser, Steps to reproduce and expected and actual. PR for bugfix MUST have tests.

Versioning

Follow SemVar

Development

Leverage Automation to do the smaller tasks such as code style, formatting, etc.
Each PR should have Unit and Integration Tests
Treat each PR as a forum. Ask questions if you are not sure. Be Verbose.
Utilize Image Snapshot. They'll help the reviewer understand new changes.

DevOps

TODO: Add

Recommended Setup

This repository is best suited for VS Code and the following extensions:

Prettier for automatic formatting
Terminal Manager to launch apps with ease. Note when doing this, you will need to set up your local workspace settings to point to the right directory for terminal manager. See below
Editor Config for specific editor formatting and instructions.

Starting

Install nvm.
Switch to the proper node version using nvm use (Install the proper node version if it is missing).
In the root folder run npm i to install root packages.
After run npm run install-packages for lerna to install sub packages and link local packages together.
TODO: Write a command to run all services with npm run start Note that this will be a memory intensive process. OR you can go to the package and run npm start to run them individually.

Quick Contributing Guide TODO

Commands

Commands are intended to run as `npm run

Command	Description
`commit`	This will trigger a prompt to write a commit messages using Commitizen
`create-package -- app-<APP_NAME>`	This will create a new package in the mono repo. You must pass in the app name with the prefix `APP-`
`dev`	This will make lerna run through the packages and run `npm run dev`
`format`	This will run Prettier to correct coding style
`format:check`	This will run a Prettier check and fail if it finds styles out of line listed in the Prettier Guide/`.prettierrc.json`
`lint`	This will run lint in all packages if it is available. Please see each packages linting rules
`start`	See `dev`
`test`	This will run `format:check` and `tests` commands for all packages
`version:normal`	This will increment the version number for the packages. Number is automatically generated by commitizen
`version:pre-release`	This is the same as `version` but for pre-release

Architecture TODO

Testing

Testing will follow the philosophy:

Treat every test as a black box test. The test should not care for implementation details and private methods/properties. The test should only care about input and output to a extent. Trying to care for them will create test bloat and unnecessary hacks.
No Shallow Rendering/Little Mocking Dependencies. Referencing Kent C. Dodds article on shallow rendering, we should not shallow render components or mock dependencies (internal to this package)(Exceptions are XHR Calls and window methods). Each consuming components/utility is part of the component, therefore to ensure that the contract between parent component and child component is honored, we do not mock/shallow render components. This is made sure that the test written in a way the user would use it.
Write Tests on how a user would use it.. Avoiding writing specs as describe('button', () => { it('#click', () => { ...Test }) }). We should write specs on how the user would use it. Such as it('should turn green when clicked')
Include image snapshot when ever possible. Testing for text asserts can only catch so much. Image snapshots can test specific CSS rendering and typically avoids a lot of overhead. This should be similar if a manual QA Tester comes in and checks for bugs. There are exceptions to this such as dynamic data where the fallback should be text assertions.
Each bug fix must accompany a updated spec file. This is soley the purpose of regression testing to make sure no bugs re-appear/

Recommended VS Code extensions

Please download the following VS Code extensions for a better development experience.

Prettier. This allows you to leverage prettier in VS Code and automatically format on save

Terminal Manager configuration

If you decide to user Terminal Manager, you will need to add this to your VS Code workspace settings:

{
  ...
  "settings": {
    "terminals.configPath": "/absolute/path/code-template-r/terminals.json"
  }
}

For some reason, this extension does not like relative paths.

JayVee-Digital-Labs / code-template-r

readme