README
📦 Generator Webpack Preact
This scaffold creates in seconds for you a professional environment to develop with a package of Webpack, TypeScript, Preact, Redux-Zero and Babel. 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.
- Install with yeoman and webpack.
- 5 Prompts for create the project.
- NPM 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.dev.js (merged with webpack.dev.js)
- tsconfig.pro.js (merged with webpack.pro.js)
- Split to:
- Plugins inside and ready to add more.
- Inside Plugins:
- You can create more components, example components inside and chooseable.
More information over the Project Structur
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
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/ (prompt: project name)
| └── year/ (prompt: 2019)
| └── project/ (prompt: newsletter)
| └── public/
| | └── index.html
| └── src/
| └── components/ (prompt: type comma seperated)
| | └── 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/ (prompt: project name)
| └── year/ (prompt: 2019)
| └── project/ (prompt: newsletter)
| └── public/
| | └── index.html
| └── src/
| └── components/ (prompt: type comma seperated)
| | └── 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
To close (stop the localhost server) the NPM run type in console (Terminal): Ctrl + C
Create a new Component
Images and Videos
Import your sass or css files in easy way. Import all your images and videos.
.maa-slider {
width: 100%;
height: 100%;
&__inner {
overflow: hidden;
width: 100%;
height: 100%;
background-color: lightgrey;
}
&__list {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
height: 100%;
}
}
This example will show how to get pictures or videos from a folder with this setup.
import "./scss/slider.scss";
import { h, render, Component } from "preact";
export default class Slider extends Component {
images = [];
videos = [];
constructor() {
super();
// Load all images from foler
this.images = this.importDefault(require.context('./img', false, /\.(png|jpe?g|svg)$/));
// Load all videos from folder
this.videos = this.importDefault(require.context('./video', false, /\.(mp4)$/));
console.log(this.images);
console.log(this.videos);
}
importDefault(r) {
return r.keys().map(r);
}
render( props ) {
this.items = this.images.map(
(item, key) => <li class="maa-slider__item"><img src={item} alt=""></img></li>
);
return (
<div class="maa-slider">
<div class="maa-slider__inner">
<ul class="maa-slider__list">
{this.items}
</ul>
</div>
</div>
);
}
}
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