Well, I've banged my head around cjs, ejs, fmljs, and other file extensions enough to know that setting a basic template for a project is sometimes the most excruciating, root-canal-like predicament in putting together a project. This is especially the case when I'm just trying to use Typescript to create a little local CLI script for myself.
So, I've create this template mostly for myself, a little love note to my own quest toward automated self-oblivion. The goal here is to be able to build a very malleable typescript application without petting too many roadside yaks.
- Code formatting with Prettier
- Linting with ESLint
- Unit testing with Jest
- Bundling with ESBuild
- Changelog mangement with auto-changelog
- Pre- and post-commit sanity checks with Husky
- Dependency visualization with Madge
- Autogeneration of documentation with TypeDoc
- Create a copy of the template
gh repo create happy-bog --template [email protected]:evannagle/typescript-boot.git --private --clone
- Install the node libidinals
cd happy-bog
make install
- Rename the app.
make rename
- Run the app
make app
Which should output:
🤖 Cleaning up ephemeral paths: dist coverage docs/graph.png
rm -rf dist coverage docs/graph.png
🤖 Building the app: dist/app.js
node scripts/esbuild.config.js production
🤖 Running the app: dist/app.js
> 42
- Quickly globalize the script by adding it to your path:
make globalize
happy-bog
> 42
You can read a description of all of the available make
commands by running, well, make
:
Rebuild the app, then run it to get the output. This is a quick way to see the output of the app, and to sanity check the build.
$(call title, "Running the app: $(BIN_FOR_APP)")
@$(BIN_FOR_NODE) $(BIN_FOR_APP) | sed 's/^/> /'
Build the app, dump into the dist folder.
$(call title, "Building the app: $(BIN_FOR_APP)")
$(BIN_FOR_NODE) $(PATH_FOR_ESBUILD_CONFIG) production
Generate the changelog for the project.
$(call title, "Generating changelog")
$(BIN_FOR_NPX) auto-changelog -p -o CHANGELOG.md --hide-credit --release-summary --hide-empty-releases --sort-commits date-desc && git add CHANGELOG.md
Clean up ephemeral paths.
$(call title, "Cleaning up ephemeral paths: $(PATHS_THAT_ARE_EPHEMERAL)")
rm -rf $(PATHS_THAT_ARE_EPHEMERAL)
Clean up all the generated files. Also clean up node_modules and package-lock.json.
$(call title, "Cleaning up all generated files")
$(PATH_TO_SCRIPTS)/deep-clean.sh
Generate the documentation for the project.
$(call title, "Generating documentation")
$(BIN_FOR_NPX) typedoc --plugin typedoc-plugin-markdown --out $(PATH_TO_DOCS) src/index.ts
Move .env-example
to .env
.
$(call title, "Moving .env-example to .env")
cp .env-example .env
Format the code using prettier.
$(call title, "Formatting code")
$(BIN_FOR_NPX) prettier --write src/**/*.ts
Globalize the project.
$(call title, "Globalizing the project")
$(BIN_FOR_NODE) $(PATH_TO_SCRIPTS)/globalize.js
Get the name of the command. Print the command, followed by the comments below it, like this one!
@$(BIN_FOR_NODE) $(PATH_TO_SCRIPTS)/makefile-parser.js --format=list
Install husky if it's not already installed.
$(call title, "Installing husky if needed")
@$(BIN_FOR_NPM) install --save-dev husky
$(BIN_FOR_NPX) husky init
Install madge if it's not already installed.
$(call title, "Installing madge if needed")
@$(BIN_FOR_NPM) list -g madge || $(BIN_FOR_NPM) install --location=global madge
Lint the code using eslint.
$(call title, "Linting code")
$(BIN_FOR_NPX) eslint src/**/*.ts
Lint the code using eslint, and fix the issues.
$(call title, "Linting code and fixing issues")
$(BIN_FOR_NPX) eslint src/**/*.ts --fix
Run the pre-commit checks.
$(call title, "Running pre-commit checks")
Rename the project.
$(call title, "Renaming the project")
$(BIN_FOR_NODE) $(PATH_TO_SCRIPTS)/rename-project.js
Run the jest unit tests.
$(call title, "Running tests")
$(BIN_FOR_NPM) exec jest
Run the jest unit tests with coverage enabled. Then open the coverage report in the browser.
$(call title, "Running tests with coverage")
$(BIN_FOR_NPM) exec jest tests --coverage
open coverage/index.html
Visualize the circular dependencies in the project.
$(call title, "Visualizing circular dependencies")
@$(BIN_FOR_MADGE) --circular --extensions ts src
Visualize the dependencies in the project.
$(call title, "Visualizing dependencies")
@$(BIN_FOR_MADGE) --extensions ts src
Visualize the dependencies in the project as a graph.
$(call title, "Visualizing dependencies as a graph")
mkdir -p $$(dirname $(PATH_FOR_GRAPH_PNG))
@$(BIN_FOR_MADGE) --extensions ts src --image $(PATH_FOR_GRAPH_PNG)
open $(PATH_FOR_GRAPH_PNG)