jellydn / new-web-app

Frontend app generator, built on top vitejs

Welcome to new-web-app 👋

Frontend app generator

🏠 Homepage

• Welcome to new-web-app 👋
• Install globally with yarn
• Or install globally with npm
• Commands

Prerequisites

• node >=14.0.0

Built with

• https://oclif.io/ - The Open CLI Framework
• https://github.com/Rich-Harris/degit straightforward project scaffolding
• https://github.com/shelljs/shelljs Unix shell commands for Node.js
• https://github.com/wj42ftns/replace-in-files Replace text in one or more files or globs.

Features

• Support React + Typescript template
• Support Svelte
• Support Solid

Why vitejs

Thank you for awesome recording from Amjad Masad

In short, better performance, more detail on https://blog.replit.com/vite

Install

# Install globally with yarn
yarn global add new-web-app
# Or install globally with npm
npm install -g new-web-app

Usage

Commands

• new-web-app help [COMMANDS]
• new-web-app react
• new-web-app react upgrade-react-18
• new-web-app update [CHANNEL]

new-web-app help [COMMANDS]

Display help for new-web-app.

USAGE
  $ new-web-app help [COMMANDS] [-n]

ARGUMENTS
  COMMANDS  Command to show help for.

FLAGS
  -n, --nested-commands  Include all nested commands in the output.

DESCRIPTION
  Display help for new-web-app.

See code: @oclif/plugin-help

new-web-app react

React App Generator

USAGE
  $ new-web-app react [-v] [-h] [-n <value>] [-t yes|no] [-s yes|no] [-a yes|no] [-q yes|no] [-f yes|no]
    [-c yes|no]

FLAGS
  -a, --linter=<option>           add ESLint, Prettier with sort imports plugin
                                  <options: yes|no>
  -c, --cypress=<option>          add cypress
                                  <options: yes|no>
  -f, --react-hook-form=<option>  add react-hook-form
                                  <options: yes|no>
  -h, --help                      Show CLI help.
  -n, --name=<value>              folder name to create
  -q, --react-query=<option>      add react-query
                                  <options: yes|no>
  -s, --storybook=<option>        add storybook
                                  <options: yes|no>
  -t, --tailwind=<option>         add tailwind css
                                  <options: yes|no>
  -v, --version                   Show CLI version.

DESCRIPTION
  React App Generator

EXAMPLES
  $ npx new-web-app@latest react -n=react-app -a=yes -q=yes

  $ npx new-web-app@latest react --name=react-app --airbnb=yes --react-query=yes

See code: dist/commands/react/index.ts

new-web-app react upgrade-react-18

Upgrade to React 18

USAGE
  $ new-web-app react upgrade-react-18 [-d <value>]

FLAGS
  -d, --directory=<value>  folder name to update

DESCRIPTION
  Upgrade to React 18

See code: dist/commands/react/upgrade-react-18.ts

new-web-app update [CHANNEL]

update the new-web-app CLI

USAGE
  $ new-web-app update [CHANNEL] [-a] [-v <value> | -i] [--force]

FLAGS
  -a, --available        Install a specific version.
  -i, --interactive      Interactively select version to install. This is ignored if a channel is provided.
  -v, --version=<value>  Install a specific version.
  --force                Force a re-download of the requested version.

DESCRIPTION
  update the new-web-app CLI

EXAMPLES
  Update to the stable channel:

    $ new-web-app update stable

  Update to a specific version:

    $ new-web-app update --version 1.0.0

  Interactively select version:

    $ new-web-app update --interactive

  See available versions:

    $ new-web-app update --available

See code: @oclif/plugin-update

Demo

Author

👤 Huynh Duc Dung @jellydn

• Website: https://productsway.com/
• Twitter: @jellydn
• Github: @jellydn

🤝 Contributing

Contributions, issues and feature requests are welcome!

Feel free to check issues page.

Stargazers

Show your support

Give a ⭐️ if this project helped you!

new-web-app's Issues

Support React JS template

Hi there! new-web-app's so I suppose it mustnt install the dependencies , it needs to just set the project dir and put the package.json like vite's cli tool does. I use pnpm instead of yarn and its much faster! Also it comes with tsx template by default , how do I use js? :c

Dependency Dashboard

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Rate-Limited

These updates are currently rate-limited. Click on a checkbox below to force their creation now.

• chore(deps): update all non-major dependencies (@babel/core, @babel/eslint-parser, @oclif/core, @storybook/addon-actions, @storybook/addon-essentials, @storybook/addon-links, @storybook/react, @swc/core, @swc/helpers, @tanstack/react-query, @types/node, @types/react, @types/react-dom, clsx, cypress, eslint-plugin-react-hooks, mocha, react, react-dom, react-hook-form, tailwindcss, typescript, vite)
• chore(deps): update dependency eslint to v9
• chore(deps): update storybook monorepo to v8 (major) (@storybook/addon-actions, @storybook/addon-essentials, @storybook/addon-links, @storybook/react)
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency @oclif/plugin-plugins to v5
• chore(deps): lock file maintenance
• 🔐 Create all rate-limited PRs at once 🔐

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update dependency husky to v9
• chore(deps): update dependency lint-staged to v15
• chore(deps): update dependency oclif to v4
• chore(deps): update dependency stylelint to v16
• chore(deps): update dependency tsup to v8
• chore(deps): update github/codeql-action action to v3
• fix(deps): update dependency @mdx-js/react to v3
• fix(deps): update dependency @oclif/plugin-help to v6
• fix(deps): update dependency @oclif/plugin-update to v4
• fix(deps): update docusaurus monorepo to v3 (major) (@docusaurus/core, @docusaurus/preset-classic)
• Click on this checkbox to rebase all open PRs at once

Detected dependencies

github-actions

.github/workflows/codeql-analysis.yml

• actions/checkout v4
• github/codeql-action v2
• github/codeql-action v2
• github/codeql-action v2

npm

package.json

• @oclif/core 3.26.0
• @oclif/plugin-help 5.2.20
• @oclif/plugin-plugins 3.9.4
• @oclif/plugin-update 3.2.4
• degit 2.8.4
• execa 8.0.1
• replace-in-file 7.1.0
• @oclif/dev-cli 1.26.10
• @swc/core 1.4.8
• @swc/helpers 0.5.7
• @trivago/prettier-plugin-sort-imports 4.3.0
• @types/degit 2.8.6
• @types/node 20.11.30
• @types/shelljs 0.8.15
• @typescript-eslint/eslint-plugin 6.21.0
• @typescript-eslint/parser 6.21.0
• eslint 8.57.0
• eslint-config-productsway 1.3.2
• husky 8.0.3
• lint-staged 14.0.1
• mocha 10.3.0
• oclif 3.17.2
• prettier 3.2.5
• regenerator-runtime 0.14.1
• shx 0.3.4
• ts-node 10.9.2
• tslib 2.6.2
• tsup 7.2.0
• typescript 5.4.3
• node >=14.0.0

templates/react/default-preset/package.json

• react 18.2.0
• react-dom 18.2.0
• @tanstack/react-query 5.28.8
• @trivago/prettier-plugin-sort-imports 4.3.0
• @types/react 18.2.70
• @types/react-dom 18.2.22
• @typescript-eslint/eslint-plugin 6.21.0
• @typescript-eslint/parser 6.21.0
• @vitejs/plugin-react 4.2.1
• cypress 13.7.1
• eslint 8.57.0
• eslint-config-productsway 1.3.2
• husky 8.0.3
• lint-staged 14.0.1
• prettier 3.2.5
• typescript 5.4.3
• vite 5.2.6

templates/react/full-preset/package.json

• @hookform/devtools 4.3.1
• react 18.2.0
• react-dom 18.2.0
• react-hook-form 7.51.1
• @tanstack/react-query 5.28.8
• @babel/core 7.24.3
• @storybook/addon-actions 7.6.17
• @storybook/addon-essentials 7.6.17
• @storybook/addon-links 7.6.17
• @storybook/react 7.6.17
• @trivago/prettier-plugin-sort-imports 4.3.0
• @types/react 18.2.70
• @types/react-dom 18.2.22
• @typescript-eslint/eslint-plugin 6.21.0
• @typescript-eslint/parser 6.21.0
• @vitejs/plugin-react 4.2.1
• autoprefixer 10.4.19
• babel-loader 9.1.3
• cypress 13.7.1
• eslint 8.57.0
• eslint-config-productsway 1.3.2
• husky 8.0.3
• lint-staged 14.0.1
• postcss 8.4.38
• prettier 3.2.5
• tailwindcss 3.4.1
• typescript 5.4.3
• vite 5.2.6
• postcss 8.4.38

templates/react/minimum-preset/package.json

• react 18.2.0
• react-dom 18.2.0
• @trivago/prettier-plugin-sort-imports 4.3.0
• @types/react 18.2.70
• @types/react-dom 18.2.22
• @typescript-eslint/eslint-plugin 6.21.0
• @typescript-eslint/parser 6.21.0
• @vitejs/plugin-react 4.2.1
• cypress 13.7.1
• eslint 8.57.0
• eslint-config-productsway 1.3.2
• husky 8.0.3
• lint-staged 14.0.1
• prettier 3.2.5
• typescript 5.4.3
• vite 5.2.6

website/package.json

• @docusaurus/core 2.4.3
• @docusaurus/preset-classic 2.4.3
• @mdx-js/react 1.6.22
• @svgr/webpack 8.1.0
• clsx 2.1.0
• file-loader 6.2.0
• react 18.2.0
• react-dom 18.2.0
• url-loader 4.1.1
• @babel/eslint-parser 7.24.1
• eslint 8.57.0
• eslint-config-airbnb 19.0.4
• eslint-config-prettier 9.1.0
• eslint-plugin-header 3.1.1
• eslint-plugin-import 2.29.1
• eslint-plugin-jsx-a11y 6.8.0
• eslint-plugin-react 7.34.1
• eslint-plugin-react-hooks 4.6.0
• prettier 3.2.5
• stylelint 15.11.0

nvm

.nvmrc

---

• Check this box to trigger a request for Renovate to run again on this repository

syntax highlighting

Hi @jellydn nice work! Ive been looking around to move from docusaurus and use a lighter alternative , does this ssg deal with syntax highlighting of code blocks? like with prism. Docusaurus uses it for syntax highlighting in code blocks https://github.com/PrismJS/prism