generate-web-project

Generate 'ready-to-code' web projects

Usage no npm install needed!

<script type="module">
  import generateWebProject from 'https://cdn.skypack.dev/generate-web-project';
</script>

README

npm version

Generate Web Project

This script aims to solve problems associated with two "traditional" ways of starting a web (Angular, React, Next.js) project:

  1. Manually type commands and modify files
    • A document must be created that includes every step necessary to create a new project (i.e. "ng new" to tweaking config files)
    • A developer has to accurately follow numerous steps within the document
  2. Create a boilerplate project (e.g. in repo)
    • The project must be maintained and updated every time new versions of the dependencies are released
    • The next major version of a particular framework (e.g. Angular) may require a complete rewrite

The script automates the process, allowing a developer to simply run the script, and commit the generated files; other developers can pull the generated files and start coding immediately. The generated project is guaranteed to have the latest of everything.

What the script does

  • The script generates a new project, installs additional packages, creates files required by these packages, and tweaks files generated by the CLI.
  • By default, the script generates a minimal web project with items that every new web project should contain for a selected framework, including, but not limited to, "prettier", "husky" & "lint-statged" (to allow "prettier" to run pre-commit), etc.
  • The script also offers the option to install a state management framework, and Storybook, as well as any other required and/or dev dependencies.

Running the script

npx generate-web-project

The script will prompt you to provide some project related information that it needs to complete the setup process. See the "Command line options" section below for more information.

Command line options

npx generate-web-project --help

Usage: generate-web-project [options]

Flags Description
-f, --framework <framework> Specify framework [ angular | react | next ]
-a, --ng-version <version> Angular CLI version
-n, --name <name> Project name
-u, --ng-universal Install Angular Universal
-m, --material Install Angular Material or Material-UI (depends on specified framework)
-s, --state-management <stateManagement> Install specified state management
-b, --storybook Install Storybook
-d, --dependencies <dependencies> Install additional dependencies
-D, --dev-dependencies <devDependencies> Install additional DEV dependencies
-h, --help output usage information