Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Docs improvements and fixes #590

Merged
merged 1 commit into from
Jul 30, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
116 changes: 54 additions & 62 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -13,19 +13,19 @@
- [Process of loading extensions](#process-of-loading-extensions)
- [Passing options](#passing-options)
- [Getting started](#getting-started)
- **[Getting started with React](#getting-started-with-react)**
- **[Getting started with SPA](#getting-started-with-spa)**
- [Adding Babel](#adding-babel)
- [Adding Babel (React)](#adding-babel-react)
- [Adding ESLint](#adding-eslint)
- [Adding ESLint (React)](#adding-eslint-react)
- [Adding CSS](#adding-css)
- [Adding Sass](#adding-sass)
- [Adding PWA capabilities](#adding-pwa-capabilities)
- **[Getting started with React](#getting-started-with-react)**
- **[Getting started with SPA](#getting-started-with-spa)**
- [Adding Babel](#adding-babel)
- [Adding Babel (React)](#adding-babel-react)
- [Adding ESLint](#adding-eslint)
- [Adding ESLint (React)](#adding-eslint-react)
- [Adding CSS](#adding-css)
- [Adding Sass](#adding-sass)
- [Adding PWA capabilities](#adding-pwa-capabilities)
- Examples
- [React](examples/react)
- [React w/ TypeScript](examples/react-typescript)
- [React w/ Astroturf](examples/react-astroturf)
- **[React](examples/react)**
- **[React w/ TypeScript](examples/react-typescript)**
- **[React w/ Astroturf](examples/react-astroturf)**
- [Comparison with alternatives](#comparison-with-alternatives)
- [License](#license)

Expand Down Expand Up @@ -133,13 +133,11 @@ Adding support for [Astroturf](https://github.com/4Catalyzer/astroturf)

At start, you need to choose basic preset, which contain necessary scripts. Then you can install extensions, which adds extra features for your project.

## Getting started with React

This preset includes all required features for the most React projects.<br>
# Getting started with React

This is the fastest way to get started with React, but you can go with more [flexible way](#getting-started-with-spa) and choose the necessary functions yourself.

#### [`More info`](./packages/preset.webpack-spa.react)
## Installation

### yarn

Expand All @@ -153,28 +151,25 @@ yarn add @zero-scripts/preset.webpack-spa.react
npm i @zero-scripts/preset.webpack-spa.react
```

### `npm run start` or `yarn start`
## Usage

### `webpack-react start`

Runs the app in development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will automatically reload if you make changes to the code.<br>
You will see the build errors and lint warnings in the console.

### `npm run build` or `yarn build`
### `webpack-react build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>

Your app is ready to be deployed.

## Getting started with SPA
# Getting started with SPA

Basically this way intended to use without any framework. However, you can extend preset with extensions.

#### [`More info`](./packages/preset.webpack-spa)
## Installation

### yarn

Expand All @@ -188,135 +183,132 @@ yarn add @zero-scripts/preset.webpack-spa
npm i @zero-scripts/preset.webpack-spa
```

### `npm run start` or `yarn start`
## Usage

### `webpack-spa start`

Runs the app in development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

The page will automatically reload if you make changes to the code.<br>
You will see the build errors and lint warnings in the console.

### `npm run build` or `yarn build`
### `webpack-spa build`

Builds the app for production to the `build` folder.<br>
It correctly bundles React in production mode and optimizes the build for the best performance.
It optimizes the build for the best performance.

The build is minified and the filenames include the hashes.<br>
## Adding Babel

Your app is ready to be deployed.
#### [`@zero-scripts/extension.webpack-babel`](./packages/extension.webpack-babel)

### Adding Babel

#### yarn
### yarn

```
yarn add @zero-scripts/extension.webpack-babel
```

#### npm
### npm

```
npm i @zero-scripts/extension.webpack-babel
```

#### [`More info`](./packages/extension.webpack-babel)
## Adding Babel (React)

### Adding Babel (React)
#### [`@zero-scripts/extension.webpack-babel.react`](./packages/extension.webpack-babel.react)

#### yarn
### yarn

```
yarn add @zero-scripts/extension.webpack-babel.react
```

#### npm
### npm

```
npm i @zero-scripts/extension.webpack-babel.react
```

#### [`More info`](./packages/extension.webpack-babel.react)
## Adding ESLint

### Adding ESLint
#### [`@zero-scripts/extension.webpack-eslint`](./packages/extension.webpack-eslint)

#### yarn
### yarn

```
yarn add @zero-scripts/extension.webpack-eslint
```

#### npm
### npm

```
npm i @zero-scripts/extension.webpack-eslint
```

#### [`More info`](./packages/extension.webpack-eslint)
## Adding ESLint (React)

### Adding ESLint (React)
#### [`@zero-scripts/extension.webpack-eslint.react`](./packages/extension.webpack-eslint.react)

#### yarn
### yarn

```
yarn add @zero-scripts/extension.webpack-eslint.react
```

#### npm
### npm

```
npm i @zero-scripts/extension.webpack-eslint.react
```

#### [`More info`](./packages/extension.webpack-eslint.react)
## Adding CSS

### Adding CSS
#### [`@zero-scripts/extension.webpack-css`](./packages/extension.webpack-css)

#### yarn
### yarn

```
yarn add @zero-scripts/extension.webpack-css
```

#### npm
### npm

```
npm i @zero-scripts/extension.webpack-css
```

#### [`More info`](./packages/extension.webpack-css)
## Adding Sass

### Adding Sass
#### [`@zero-scripts/extension.webpack-sass`](./packages/extension.webpack-sass)

#### yarn
### yarn

```
yarn add @zero-scripts/extension.webpack-sass
```

#### npm
### npm

```
npm i @zero-scripts/extension.webpack-sass
```

#### [`More info`](./packages/extension.webpack-sass)
## Adding PWA capabilities

### Adding PWA capabilities
#### [`@zero-scripts/extension.webpack-pwa`](./packages/extension.webpack-pwa)

#### yarn
### yarn

```
yarn add @zero-scripts/extension.webpack-pwa
```

#### npm
### npm

```
npm i @zero-scripts/extension.webpack-pwa
```

#### [`More info`](./packages/extension.webpack-pwa)

# Comparison with alternatives

| Project | Modular | Zero Configuration | Extensible | Universal | Customizable | Scaffold Applications |
Expand All @@ -335,4 +327,4 @@ npm i @zero-scripts/extension.webpack-pwa

# License

Zero Scripts has [MIT license](./LICENSE)
Zero Scripts has a [MIT license](./LICENSE)
71 changes: 33 additions & 38 deletions packages/config.webpack/README.md
Original file line number Diff line number Diff line change
@@ -1,61 +1,56 @@
# @zero-scripts/config.webpack

## Description

Configuration for Webpack
**Note**: You don't need to install this package manually. This package exists to be used inside extensions or presets.

## Options

| Option | Type | Default |
| -------------------- | --------- | ---------------------------------------------- |
| useSourceMap | _Boolean_ | `true` |
| useTypescript | _boolean_ | `true` if `tsconfig.json` exists, else `false` |
| additionalEntry | _Array_ | `[]` |
| moduleFileExtensions | _Array_ | `[]` |
| jsFileExtensions | _Array_ | `[]` |
| paths | _Object_ | |
| paths.root | _String_ | `` |
| paths.src | _String_ | `src` |
| paths.build | _String_ | `build` |
| paths.indexJs | _String_ | `src/index` |
| paths.indexHtml | _String_ | `public/index.html` |
| paths.public | _String_ | `public` |
| Option | Type | Default |
| :------------------------: | :-------: | :--------------------------------------------: |
| **`useSourceMap`** | `boolean` | `true` |
| **`useTypescript`** | `boolean` | `true` if `tsconfig.json` exists, else `false` |
| **`additionalEntry`** | `array` | `[]` |
| **`moduleFileExtensions`** | `array` | `[]` |
| **`jsFileExtensions`** | `array` | `[]` |
| **`paths`** | `object` | |
| **`paths.root`** | `string` | |
| **`paths.src`** | `string` | `src` |
| **`paths.build`** | `string` | `build` |
| **`paths.indexJs`** | `string` | `src/index` |
| **`paths.indexHtml`** | `string` | `public/index.html` |
| **`paths.public`** | `string` | `public` |

## Passing options

### Example

Turn off source maps
#### Turn off source maps

#### `package.json`

```
{
...
"zero-scripts": {
"@zero-scripts/config.webpack": {
"sourceMap": false
}
}
+ "zero-scripts": {
+ "config.webpack": {
+ "sourceMap": false
+ }
+ }
}
```

### Example

Sources are in root directory
#### Handle source files which placed in the root directory

#### `package.json`

```
```diff
{
...
"zero-scripts": {
"@zero-scripts/config.webpack": {
"paths": {
"src": "",
"indexJs": "index"
}
}
}
+ "zero-scripts": {
+ "config.webpack": {
+ "paths": {
+ "src": "",
+ "indexJs": "index"
+ }
+ }
+ }
}
```

## [Main documentation](https://github.com/artemirq/zero-scriptsjs/tree/0.5.x)
2 changes: 1 addition & 1 deletion packages/config.webpack/package.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"name": "@zero-scripts/config.webpack",
"version": "0.5.0",
"description": "Base configuration for Webpack",
"description": "Configuration facilities",
"author": {
"name": "Artem Batura",
"email": "artemir.q@gmail.com"
Expand Down
4 changes: 4 additions & 0 deletions packages/core/README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# @zero-scripts/core

**Note**: You don't need to install this package manually. This package exists to be used inside extensions or presets.

Framework for creating presets, configurations and extensions

## [Main documentation](https://github.com/artemirq/zero-scriptsjs/tree/0.5.x)
Loading