Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/prod3v3loper/generator-webpack-preact
📦 Create professional Projects with Webpack, TypeScript, Preact, Redux-Zero and Babel
https://github.com/prod3v3loper/generator-webpack-preact
babel development devserver hot-module-replacement html preact production react redux redux-zero sass scaffold scaffold-template scaffolding template typescript webpack
Last synced: 27 days ago
JSON representation
📦 Create professional Projects with Webpack, TypeScript, Preact, Redux-Zero and Babel
- Host: GitHub
- URL: https://github.com/prod3v3loper/generator-webpack-preact
- Owner: prod3v3loper
- License: mit
- Created: 2019-02-07T22:53:10.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-23T21:05:17.000Z (about 2 months ago)
- Last Synced: 2024-12-14T21:48:17.285Z (about 1 month ago)
- Topics: babel, development, devserver, hot-module-replacement, html, preact, production, react, redux, redux-zero, sass, scaffold, scaffold-template, scaffolding, template, typescript, webpack
- Language: JavaScript
- Homepage: https://prod3v3loper.github.io/generator-webpack-preact/
- Size: 809 KB
- Stars: 3
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
README
# 📦 Generator Webpack Preact
[](https://www.npmjs.com/package/generator-webpack-preact)
[](https://www.npmjs.com/package/generator-webpack-preact)
[](https://github.com/prod3v3loper/generator-webpack-preact/releases)
[](https://github.com/prod3v3loper/generator-webpack-preact/commits/master)
[](https://github.com/prod3v3loper/generator-webpack-preact/blob/master/LICENSE)
[](https://github.com/prod3v3loper/generator-webpack-preact/issues)
# 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](https://webpack.js.org/) (Bundler)
- [TypeScript](https://github.com/Microsoft/TypeScript) (Code in ES6 or higher)
- [Preact](https://github.com/developit/preact) (TSX and JSX)
- [Redux-Zero](https://github.com/redux-zero/redux-zero) (Storage)
- [Babel](https://github.com/babel/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](https://github.com/jantimon/html-webpack-plugin)
- [Clean Webpack Plugin](https://github.com/johnagan/clean-webpack-plugin)
- You can create more components, example components inside and chooseable.
- Inside components:
- [Components Examples](https://preactjs.com/)
More information over the [Project Structur](https://github.com/prod3v3loper/generator-webpack-preact#what-this-do)
# INSTALL
1. Install [Node.js](https://nodejs.org/en/) to use the [NPM](https://www.npmjs.com/) (Node Package Manager), if not installed.
- Check your NPM version `npm -v`
- Additional you can install [NVM](https://github.com/nvm-sh/nvm#installing-and-updating) (Node Version Manager) to change version.
2. We use `yo` ([Yeoman Generator](https://yeoman.io/)) 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.
```bash
username$ cd /Users/username/projects/
```
And install.
```bash
projects$ npm i generator-webpack-preact
```
Now call yeoman.
```bash
projects$ yo
```
If promt a call
```bash
? 'Allo prod3v3loper,! What would you like to do? (Use arrow keys)
Run a generator
> webpack-preact
```
or say yeoman directly the generator you want to use.
```bash
projects$ yo webpack-preact
```
Enter and create your project. You are ready to developing.
## GLOBAL
> To use it from everywhere install the generator global.
```bash
projects$ npm i -g generator-webpack-preact
```
No local install need anymore, you cann now call everytime everywhere `yo webpack-preact`.
```bash
projects$ yo
```
If promt a call
```bash
? 'Allo prod3v3loper,! What would you like to do? (Use arrow keys)
Run a generator
> webpack-preact
```
or directly
```bash
projects$ 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` ;)
```bash
? 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 answerring all questions, start the create process.
```bash
create src/index.tsx
create src/scss/style.scss
create public/index.html
create package.json
create global.config.json
create tsconfig.json
create webpack.config.js
create webpack.dev.js
create webpack.pro.js
create src/components/counter/actions.js
create src/components/counter/counter.js
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**)
```bash
projects$ cd /Users/username/projects/customer/year/newsletter
```
If you not installed dependencies in the prompts, then install first.
```bash
newsletter$ npm install
```
This command start the Server with the hotmodule.
```bash
newsletter$ npm run dev
```
This command build the dist folder with the end product.
```bash
newsletter$ 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.
```scss
.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.
```jsx
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) => (
));
return (
);
}
}
```
# Uninstall
**NPM**
Local
```bash
projects$ npm uninstall generator-webpack-preact
```
Global
```bash
projects$ 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](https://github.com/prod3v3loper/generator-webpack-preact/issues).
# CONTRIBUTE
Please read the [contributing](https://github.com/prod3v3loper/generator-webpack-preact/blob/master/.github/CONTRIBUTING.md) to contribute.
# VULNERABILITY
Please use the Security section for privately reporting a [vulnerability](https://github.com/prod3v3loper/generator-webpack-preact/security).
# PACKAGE
You find generator-webpack-preact in [Yeoman generator](https://yeoman.io/generators/), [NPM](https://www.npmjs.com/) and on [Github](https://github.com/).
[NPM - generator-webpack-preact](https://www.npmjs.com/package/generator-webpack-preact)
[GitHub - generator-webpack-preact](https://github.com/prod3v3loper/generator-webpack-preact)
[Github Theme - generator-webpack-preact](https://prod3v3loper.github.io/generator-webpack-preact/)
# AUTHOR
[prod3v3loper](https://www.prod3v3loper.com)
# SUPPORT
[Hyperly](https://www.hyperly.de)
# LICENSE
[MIT](https://github.com/prod3v3loper/generator-webpack-preact/blob/master/LICENSE)