Generator Webpack Preact

Github Theme Page

This scaffold creates in seconds for you a professional environment to develop with a package of Webpack, TypeScript, Babel, Preact, Redux-Zero and loaders. Code a application in HTML (5), SASS (CSS), TS (X) and JS (X).

• 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.

• Supported yeoman-generator and webpack-cli.
• Prompts for create the project.
• Welcome window with introduction for next steps after install.
• Development Server with Hot Module Replacement (HMR) ready.
• NPM Install dependencies after scaffolding ready.
• Configs was splited to development and production.
  • Split to:
    • webpack.config.js
    • webpack.dev.js (merged with webpack.config.js)
    • webpack.pro.js (merged with webpack.config.js)
    • tsconfig.dev.js (merged with webpack.dev.js)
    • tsconfig.pro.js (merged with webpack.pro.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:
    • Counter
    • Clock
    • TodoList

Serach in Yeoman generator or in NPM for webpack-preact or preact.

Install in two ways, choose your favourite.

Install with npm and use with Yeoman

NPM and Yeoman

Install Node.js to use the Node Package Manager (NPM). You can use yo (Yeoman) to install the scaffold and start with it.

Switch to the projects folder.

username$ cd /Users/username/projects/

projects$ npm i generator-webpack-preact

projects$ yo

If promt a call

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

or directly

projects$ yo webpack-preact

Enter and create your project

Or install the generator global

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

Type password and now run in your project folder

projects$ yo

If promt a call

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

or directly

projects$ yo webpack-preact

Enter and create your project

Install with Git and use with Webpack

Git and Webpack

Install Git to clone with it. Create a Scaffold Templates folder and open your Terminal, to switch in the folder.

username$ cd /Users/username/scaffold/templates/

Clone the repo or download to the place, you want your templates.

templates$ git clone https://github.com/prod3v3loper/generator-webpack-preact.git /Users/username/scaffold/templates/

And now install all Dependencies in package.json for the generator

templates$ npm install

Now create your main Projects folder. This folder contains all projects that we then create.

Switch to the projects folder.

templates$ cd /Users/username/projects/

Start the scaffolding with webpack init the webpack-cli init from our scaffold templates folder with the template generator-webpack-preact

projects$ webpack init /Users/username/scaffold/templates/generator-webpack-preact

Promt for the two solutions

And we become a promt ;)

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

After answer all questions start the create

   create src/index.tsx
   create src/scss/style.scss
   create public/index.html
   create package.json
   create global.config.json
   create tsconfig.dev.json
   create tsconfig.pro.json
   create src/components/counter/actions.js
   create src/components/counter/counter.js
   create src/components/counter/store.js
   create webpack.config.js
   create webpack.dev.js
   create webpack.pro.js

What this do

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

Projects

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

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/ (project name)
|   └── year/ (2019)
|       └── project/ (newsletter)
|           └── public/
|           |   └── index.html
|           └── src/
|               └── components/
|               |   └── counter/
|               |       └── actions.js
|               |       └── counter.js
|               |       └── store.js
|               └── scss/
|               |   └── style.scss
|               └── index.tsx
|
├── another-customer/
|   └── 2018/
|   |   └── project1/
|   |   |   └── ...
|   |   └── project2/
|   |       └── ...
|   └── 2019/
|       └── project1/
|       |   └── ...
|       └── project2/
|           └── public/
|           |   └── index.html
|           └── src/
|               └── components/
|               |   └── counter/
|               |       └── actions.js
|               |       └── counter.js
|               |       └── store.js
|               └── scss/
|               |   └── style.scss
|               └── index.tsx

Usage

Now run and see the Magic :)

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

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

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

newsletter$ npm install

This command start the Server with the hotmodule.

newsletter$ npm run dev

This command build the dist folder with the end product.

newsletter$ npm run release

Uninstall

NPM

Local

projects$ npm uninstall generator-webpack-preact

Global

projects$ npm uninstall -g generator-webpack-preact

Contribute

Please read the contributing.

Authors

• Samet Tarim - All works - prod3v3loper

License

MIT