create-web-config
TypeScript icon, indicating that this package has built-in type declarations

1.0.10 • Public • Published

create-web-config

Downloads per month NPM Version Dependencies Contributors

A CLI to help you get started building modern web applications.


-----------------------------------------------------

➤ Usage

To create a new app you run the following command.

$ npm init web-config new <dir>

This command will create a project from scratch for you with sweet features as for example SCSS imports, Karma testing, live reloading, coping resources, chunking, treeshaking, Typescript, license extraction, filesize visualizer, JSON import, budgets, build progress, minifying, compression with brotli and gzip and much more.

That's it! Behind the curtains, the library web-config is used.

-----------------------------------------------------

➤ Configuration

The below table shows how to configure the new command.

Usage: new [options] <dir>

Setup a new project from scratch.

Options:
  --dry            Runs the command without writing any files.
  --lit            Adds lit-element and various webapp related libraries to the setup.
  --no-install     Doesn't install node_modules.
  --sw             Adds a service worker to the setup.
  --src <string>   Name of the folder with the transpiled output (default: "src")
  --dist <string>  Name of the folder with the source code (default: "dist")
  -h, --help       output usage information

-----------------------------------------------------

➤ Example

Below are two examples on how to use the command. The commands will both create a project in a folder called "my-project". The first one will create a simple configuration while the other will configure the project to use lit-element.

$ npm init web-config new my-project
$ npm init web-config new my-project --lit

-----------------------------------------------------

➤ Overview

Here's an overview of the files that are generated for you.

File Description
.browserslistrc Specifies which browsers are supported by your build.
.gitignore Files ignored when adding files to git.
karma.conf.js Configuration for the testing setup with karma.
package.json Specifies dependencies and other information about your project.
README.md Gives an introduction to your project.
rollup.config.ts Rollup configuration for the build.
tsconfig.json Configuration for Typescript.
.eslintrc.json Configuration for how your files should be linted.
.eslintignore Configuration for which files should be ignored by the linter.
typings.d.ts Additional typings for Typescript.
src/index.html Entry HTML for your webapp.
src/main.ts Entry JS for your webapp.
src/main.scss Styles loaded and appended to the document.
src/robots.txt Specifies how crawlers should handle your site.
src/assets/manifest.json Web manifest.
src/pages/home-element.ts Element for the home page.
src/pages/home-element.scss SCSS for the home element.
src/pages/home-element.test.ts Tests for the home element.

-----------------------------------------------------

➤ 100/100 Lighthouse score

If you add a service worker by running the $ npm init web-config new my-project --sw command you'll get to enjoy a 100/100 Lighthouse score from the beginning.

-----------------------------------------------------

➤ Local installation

You can also install the library locally and use the CLI you can run the following command.

$ npm i create-web-config

Then you would use the CLI like this.

$ web-config new my-project

-----------------------------------------------------

➤ Contributors

Andreas Mehlsen
Andreas Mehlsen

-----------------------------------------------------

➤ License

Licensed under MIT.

Package Sidebar

Install

npm i create-web-config

Weekly Downloads

5

Version

1.0.10

License

MIT

Unpacked Size

47.7 kB

Total Files

6

Last publish

Collaborators

  • explore