📦 Generator Webpack Preact

OVERVIEW

This scaffold creates in seconds for you a professional environment. Code a application in HTML(5), (S)CSS, TS(X) and JS(X). All what you need for Apps.

• Webpack (Bundler)
• TypeScript (Code in ES6 or higher)
• Preact (TSX and JSX)
• Redux-Zero (Storage)
• Babel (Compile back for Browserslist to last 2 versions or other options)

A total solution for your projects. You have with this scaffold the followed.

• 5 Prompts for create the project.
• Automatically install dependencies after scaffolding ready.
• Development Server with Hot Module Replacement (HMR) ready.
  • Welcome window with introduction for next steps after install.
• Configs was splited to development and production.
  • Split to:
    • webpack.config.js (common)
    • webpack.dev.js (merged with webpack.config.js)
    • webpack.pro.js (merged with webpack.config.js)
    • tsconfig.js (merged with webpack.dev.js & webpack.prod.js)
• Plugins inside and ready to add more.
  • Inside Plugins:
    • HTML Webpack Plugin
    • Clean Webpack Plugin
• You can create more components, example components inside and chooseable.
  • Inside components:
    • Components Examples

More information over the Project Structur

INSTALL

1. Install Node.js to use the NPM (Node Package Manager), if not installed.

• Check your NPM version npm -v
• Additional you can install NVM (Node Version Manager) to change version.

2. We use yo (Yeoman Generator) to install the scaffold and start with it.

• Also install yeoman global npm install -g yo

LOCAL

To use only in your project.

Switch to your projects folder, to install it in the project.

1username$ cd /Users/username/projects/

And install.

1projects$ npm i generator-webpack-preact

Now call yeoman.

1projects$ yo

If promt a call

1? 'Allo prod3v3loper,! What would you like to do? (Use arrow keys)
2  Run a generator
3> webpack-preact

or say yeoman directly the generator you want to use.

1projects$ yo webpack-preact

Enter and create your project. You are ready to developing.

GLOBAL

To use it from everywhere install the generator global.

1projects$ npm i -g generator-webpack-preact

No local install need anymore, you cann now call everytime everywhere yo webpack-preact.

1projects$ yo

If promt a call

1? 'Allo prod3v3loper,! What would you like to do? (Use arrow keys)
2  Run a generator
3> webpack-preact

or directly

1projects$ yo webpack-preact

Enter and create your project. You are ready to developing.

Promt for the solution

And we become a promt, after choose our generator webpack preact ;)

1? Customer name? (customer)
2? Project year? (2019)
3? Project name? (newsletter)
4? Components you want to use? (type comma seperated) (counter)
5? Want you install all dependencies? Y/n

After answerring all questions, start the create process.

1   create src/index.tsx
2   create src/scss/style.scss
3   create public/index.html
4   create package.json
5   create global.config.json
6   create tsconfig.json
7   create webpack.config.js
8   create webpack.dev.js
9   create webpack.pro.js
10   create src/components/counter/actions.js
11   create src/components/counter/counter.js
12   create src/components/counter/store.js

What this do

The following structure is created after the prompt input. With the typed data.

Projects
|
├── customer/ (prompt: project name)
|   └── year/ (prompt: 2019)
|       └── project/ (prompt: newsletter)
|           └── public/
|           |   └── index.html
|           └── src/
|           |   └── scss/
|           |   |   └── style.scss
|           |   └── index.tsx
|           └── components/ (prompt: type comma seperated)
|               └── counter/
|                   └── actions.js
|                   └── counter.js
|                   └── store.js

But the idea behind it is to collect and manage all our projects in our projects folder. So every time we call the generator in our projects folder and create a new project with customer name, it will be added to the others.

Projects
|
├── customer/ (prompt: project name)
|   └── year/ (prompt: 2019)
|       └── project/ (prompt: newsletter)
|           └── public/
|           |   └── index.html
|           └── src/
|           |   └── scss/
|           |   |   └── style.scss
|           |   └── index.tsx
|           └── components/ (prompt: type comma seperated)
|               └── counter/
|                   └── actions.js
|                   └── counter.js
|                   └── store.js
|
├── another-customer/
|   └── 2018/
|   |   └── project1/
|   |   |   └── ...
|   |   └── project2/
|   |       └── ...
|   └── 2019/
|       └── project1/
|       |   └── ...
|       └── project2/
|           └── public/
|           |   └── index.html
|           └── src/
|           |   └── scss/
|           |   |   └── style.scss
|           |   └── index.tsx
|           └── components/ (prompt: type comma seperated)
|               └── counter/
|                   └── actions.js
|                   └── counter.js
|                   └── store.js

USAGE

Now run and see the Magic :)

Switch to the new project folder we have created. (You typed in the prompt default newsletter)

1projects$ cd /Users/username/projects/customer/year/newsletter

If you not installed dependencies in the prompts, then install first.

1newsletter$ npm install

This command start the Server with the hotmodule.

1newsletter$ npm run dev

This command build the dist folder with the end product.

1newsletter$ npm run prod

To close (stop the localhost server) the NPM run type in console (Terminal): Ctrl + C

COMPONENTS

Create your own components, or request a feature issue. Here two samples.

Images or Videos

Import your sass or css files in easy way. Import all your images and videos.

1.maa-slider {
2  width: 100%;
3  height: 100%;
4
5  &__inner {
6    overflow: hidden;
7    width: 100%;
8    height: 100%;
9    background-color: lightgrey;
10  }
11
12  &__list {
13    list-style: none;
14    padding: 0;
15    margin: 0;
16    width: 100%;
17    height: 100%;
18  }
19}

This example will show how to get pictures or videos from a folder with this setup.

1import "./scss/slider.scss";
2import { h, render, Component } from "preact";
3
4export default class Slider extends Component {
5  images = [];
6  videos = [];
7
8  constructor() {
9    super();
10
11    // Load all images from foler
12    this.images = this.importDefault(
13      require.context("./img", false, /\.(png|jpe?g|svg)$/)
14    );
15    // Load all videos from folder
16    this.videos = this.importDefault(
17      require.context("./video", false, /\.(mp4)$/)
18    );
19
20    console.log(this.images);
21    console.log(this.videos);
22  }
23
24  importDefault(r) {
25    return r.keys().map(r);
26  }
27
28  render(props) {
29    this.items = this.images.map((item, key) => (
30      <li class="maa-slider__item">
31        <img src={item} alt=""></img>
32      </li>
33    ));
34
35    return (
36      <div class="maa-slider">
37        <div class="maa-slider__inner">
38          <ul class="maa-slider__list">{this.items}</ul>
39        </div>
40      </div>
41    );
42  }
43}

Uninstall

NPM

Local

1projects$ npm uninstall generator-webpack-preact

Global

1projects$ npm uninstall -g generator-webpack-preact

ISSUE

Please use the issue tab to request a:

• Bug
• Feature

Choose template and report a bug or feature you want issues.

CONTRIBUTE

Please read the contributing to contribute.

VULNERABILITY

Please use the Security section for privately reporting a vulnerability.

PACKAGE

You find generator-webpack-preact in Yeoman generator, NPM and on Github.

NPM - generator-webpack-preact

GitHub - generator-webpack-preact

Github Theme - generator-webpack-preact

AUTHOR

prod3v3loper

SUPPORT

Hyperly

LICENSE

MIT