{"id":15511613,"url":"https://github.com/prod3v3loper/generator-webpack-preact","last_synced_at":"2025-04-23T14:15:00.585Z","repository":{"id":57249341,"uuid":"169655522","full_name":"prod3v3loper/generator-webpack-preact","owner":"prod3v3loper","description":"📦 Create professional Projects with Webpack, TypeScript, Preact, Redux-Zero and Babel","archived":false,"fork":false,"pushed_at":"2024-11-23T21:05:17.000Z","size":828,"stargazers_count":3,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-23T14:14:51.433Z","etag":null,"topics":["babel","development","devserver","hot-module-replacement","html","preact","production","react","redux","redux-zero","sass","scaffold","scaffold-template","scaffolding","template","typescript","webpack"],"latest_commit_sha":null,"homepage":"https://prod3v3loper.github.io/generator-webpack-preact/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/prod3v3loper.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-02-07T22:53:10.000Z","updated_at":"2024-06-12T14:41:20.000Z","dependencies_parsed_at":"2024-06-12T10:31:33.021Z","dependency_job_id":null,"html_url":"https://github.com/prod3v3loper/generator-webpack-preact","commit_stats":null,"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prod3v3loper%2Fgenerator-webpack-preact","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prod3v3loper%2Fgenerator-webpack-preact/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prod3v3loper%2Fgenerator-webpack-preact/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/prod3v3loper%2Fgenerator-webpack-preact/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/prod3v3loper","download_url":"https://codeload.github.com/prod3v3loper/generator-webpack-preact/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250447979,"owners_count":21432165,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["babel","development","devserver","hot-module-replacement","html","preact","production","react","redux","redux-zero","sass","scaffold","scaffold-template","scaffolding","template","typescript","webpack"],"created_at":"2024-10-02T09:53:08.705Z","updated_at":"2025-04-23T14:15:00.562Z","avatar_url":"https://github.com/prod3v3loper.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# 📦 Generator Webpack Preact\n\n![workflow](https://github.com/prod3v3loper/generator-webpack-preact/actions/workflows/node.js.yml/badge.svg)\n![Language](https://img.shields.io/github/languages/top/prod3v3loper/generator-webpack-preact.svg?style=flat \"Language\")\n[![NPM Version](https://img.shields.io/npm/v/generator-webpack-preact.svg?style=flat \"NPM Version\")](https://www.npmjs.com/package/generator-webpack-preact)\n[![NPM Donwloads](https://img.shields.io/npm/d18m/generator-webpack-preact.svg?style=flat \"NPM Donwloads\")](https://www.npmjs.com/package/generator-webpack-preact)\n[![Github Latest Release Version](https://img.shields.io/github/release/prod3v3loper/generator-webpack-preact.svg?style=flat \"Github Latest Release Version\")](https://github.com/prod3v3loper/generator-webpack-preact/releases)\n![Github Downloads](https://img.shields.io/github/downloads/prod3v3loper/generator-webpack-preact/latest/total.svg?style=flat \"Github Downloads\")\n[![Commits](https://img.shields.io/github/commit-activity/m/prod3v3loper/generator-webpack-preact.svg?style=flat \"Commit Activity\")](https://github.com/prod3v3loper/generator-webpack-preact/commits/master)\n[![License](https://img.shields.io/npm/l/generator-webpack-preact.svg?style=flat \"License\")](https://github.com/prod3v3loper/generator-webpack-preact/blob/master/LICENSE)\n[![Issues](https://img.shields.io/github/issues/prod3v3loper/generator-webpack-preact.svg?style=flat \"Issues\")](https://github.com/prod3v3loper/generator-webpack-preact/issues)\n![Languages](https://img.shields.io/github/languages/count/prod3v3loper/generator-webpack-preact.svg?style=flat \"Language Count\")\n![Minified](https://img.shields.io/bundlephobia/min/generator-webpack-preact.svg?style=flat \"Minified\")\n![Gzipped](https://img.shields.io/bundlephobia/minzip/generator-webpack-preact.svg?style=flat \"Minified \u0026 Gzipped\")\n\n\u003cimg src=\"https://media4.giphy.com/media/4KzpjLvJjJknJ5Xuak/giphy.gif?cid=ecf05e47t4rc89yc0kv329d4d10ga4ti7qo08pyth1w9c9c6\u0026rid=giphy.gif\" width=\"300\"/\u003e\n\n# OVERVIEW\n\nThis 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.\n\n- [Webpack](https://webpack.js.org/) (Bundler)\n- [TypeScript](https://github.com/Microsoft/TypeScript) (Code in ES6 or higher)\n- [Preact](https://github.com/developit/preact) (TSX and JSX)\n- [Redux-Zero](https://github.com/redux-zero/redux-zero) (Storage)\n- [Babel](https://github.com/babel/babel) (Compile back for Browserslist to last 2 versions or other options)\n\n\u003cimg src=\"img/structure.png\"\u003e\n\nA total solution for your projects. You have with this scaffold the followed.\n\n- 5 Prompts for create the project.\n- Automatically install dependencies after scaffolding ready.\n- Development Server with Hot Module Replacement (HMR) ready.\n  - Welcome window with introduction for next steps after install.\n- Configs was splited to development and production.\n  - Split to:\n    - webpack.config.js (common)\n    - webpack.dev.js (merged with webpack.config.js)\n    - webpack.pro.js (merged with webpack.config.js)\n    - tsconfig.js (merged with webpack.dev.js \u0026 webpack.prod.js)\n- Plugins inside and ready to add more.\n  - Inside Plugins:\n    - [HTML Webpack Plugin](https://github.com/jantimon/html-webpack-plugin)\n    - [Clean Webpack Plugin](https://github.com/johnagan/clean-webpack-plugin)\n- You can create more components, example components inside and chooseable.\n  - Inside components:\n    - [Components Examples](https://preactjs.com/)\n\nMore information over the [Project Structur](https://github.com/prod3v3loper/generator-webpack-preact#what-this-do)\n\n# INSTALL\n\n1. Install [Node.js](https://nodejs.org/en/) to use the [NPM](https://www.npmjs.com/) (Node Package Manager), if not installed.\n  - Check your NPM version `npm -v`\n  - Additional you can install [NVM](https://github.com/nvm-sh/nvm#installing-and-updating) (Node Version Manager) to change version.\n2. We use `yo` ([Yeoman Generator](https://yeoman.io/)) to install the scaffold and start with it.\n  - Also install yeoman global `npm install -g yo`\n\n## LOCAL\n\n\u003e To use only in your project.\n\nSwitch to your projects folder, to install it in the project.\n\n```bash\nusername$ cd /Users/username/projects/\n```\n\nAnd install.\n\n```bash\nprojects$ npm i generator-webpack-preact\n```\n\nNow call yeoman.\n\n```bash\nprojects$ yo\n```\n\nIf promt a call\n\n```bash\n? 'Allo prod3v3loper,! What would you like to do? (Use arrow keys)\n  Run a generator\n\u003e webpack-preact\n```\n\nor say yeoman directly the generator you want to use.\n\n```bash\nprojects$ yo webpack-preact\n```\n\nEnter and create your project. You are ready to developing.\n\n## GLOBAL\n\n\u003e To use it from everywhere install the generator global.\n\n```bash\nprojects$ npm i -g generator-webpack-preact\n```\n\nNo local install need anymore, you cann now call everytime everywhere `yo webpack-preact`.\n\n```bash\nprojects$ yo\n```\n\nIf promt a call\n\n```bash\n? 'Allo prod3v3loper,! What would you like to do? (Use arrow keys)\n  Run a generator\n\u003e webpack-preact\n```\n\nor directly\n\n```bash\nprojects$ yo webpack-preact\n```\n\nEnter and create your project. You are ready to developing.\n\n# Promt for the solution\n\nAnd we become a promt, after choose our generator `webpack preact` ;)\n\n```bash\n? Customer name? (customer)\n? Project year? (2019)\n? Project name? (newsletter)\n? Components you want to use? (type comma seperated) (counter)\n? Want you install all dependencies? Y/n\n```\n\nAfter answerring all questions, start the create process.\n\n```bash\n   create src/index.tsx\n   create src/scss/style.scss\n   create public/index.html\n   create package.json\n   create global.config.json\n   create tsconfig.json\n   create webpack.config.js\n   create webpack.dev.js\n   create webpack.pro.js\n   create src/components/counter/actions.js\n   create src/components/counter/counter.js\n   create src/components/counter/store.js\n```\n\n# What this do\n\nThe following structure is created after the prompt input. With the typed data.\n\n```\nProjects\n|\n├── customer/ (prompt: project name)\n|   └── year/ (prompt: 2019)\n|       └── project/ (prompt: newsletter)\n|           └── public/\n|           |   └── index.html\n|           └── src/\n|           |   └── scss/\n|           |   |   └── style.scss\n|           |   └── index.tsx\n|           └── components/ (prompt: type comma seperated)\n|               └── counter/\n|                   └── actions.js\n|                   └── counter.js\n|                   └── store.js\n```\n\nBut 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.\n\n```\nProjects\n|\n├── customer/ (prompt: project name)\n|   └── year/ (prompt: 2019)\n|       └── project/ (prompt: newsletter)\n|           └── public/\n|           |   └── index.html\n|           └── src/\n|           |   └── scss/\n|           |   |   └── style.scss\n|           |   └── index.tsx\n|           └── components/ (prompt: type comma seperated)\n|               └── counter/\n|                   └── actions.js\n|                   └── counter.js\n|                   └── store.js\n|\n├── another-customer/\n|   └── 2018/\n|   |   └── project1/\n|   |   |   └── ...\n|   |   └── project2/\n|   |       └── ...\n|   └── 2019/\n|       └── project1/\n|       |   └── ...\n|       └── project2/\n|           └── public/\n|           |   └── index.html\n|           └── src/\n|           |   └── scss/\n|           |   |   └── style.scss\n|           |   └── index.tsx\n|           └── components/ (prompt: type comma seperated)\n|               └── counter/\n|                   └── actions.js\n|                   └── counter.js\n|                   └── store.js\n\n```\n\n# USAGE\n\nNow run and see the Magic :)\n\nSwitch to the new project folder we have created. (You typed in the prompt default **newsletter**)\n\n```bash\nprojects$ cd /Users/username/projects/customer/year/newsletter\n```\n\nIf you not installed dependencies in the prompts, then install first.\n\n```bash\nnewsletter$ npm install\n```\n\nThis command start the Server with the hotmodule.\n\n```bash\nnewsletter$ npm run dev\n```\n\nThis command build the dist folder with the end product.\n\n```bash\nnewsletter$ npm run prod\n```\n\nTo close (stop the localhost server) the NPM run type in console (Terminal):\nCtrl + C\n\n# COMPONENTS\n\nCreate your own components, or request a feature issue. Here two samples.\n\n## Images or Videos\n\nImport your sass or css files in easy way.\nImport all your images and videos.\n\n```scss\n.maa-slider {\n  width: 100%;\n  height: 100%;\n\n  \u0026__inner {\n    overflow: hidden;\n    width: 100%;\n    height: 100%;\n    background-color: lightgrey;\n  }\n\n  \u0026__list {\n    list-style: none;\n    padding: 0;\n    margin: 0;\n    width: 100%;\n    height: 100%;\n  }\n}\n```\n\nThis example will show how to get pictures or videos from a folder with this setup.\n\n```jsx\nimport \"./scss/slider.scss\";\nimport { h, render, Component } from \"preact\";\n\nexport default class Slider extends Component {\n  images = [];\n  videos = [];\n\n  constructor() {\n    super();\n\n    // Load all images from foler\n    this.images = this.importDefault(\n      require.context(\"./img\", false, /\\.(png|jpe?g|svg)$/)\n    );\n    // Load all videos from folder\n    this.videos = this.importDefault(\n      require.context(\"./video\", false, /\\.(mp4)$/)\n    );\n\n    console.log(this.images);\n    console.log(this.videos);\n  }\n\n  importDefault(r) {\n    return r.keys().map(r);\n  }\n\n  render(props) {\n    this.items = this.images.map((item, key) =\u003e (\n      \u003cli class=\"maa-slider__item\"\u003e\n        \u003cimg src={item} alt=\"\"\u003e\u003c/img\u003e\n      \u003c/li\u003e\n    ));\n\n    return (\n      \u003cdiv class=\"maa-slider\"\u003e\n        \u003cdiv class=\"maa-slider__inner\"\u003e\n          \u003cul class=\"maa-slider__list\"\u003e{this.items}\u003c/ul\u003e\n        \u003c/div\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\n# Uninstall\n\n**NPM**\n\nLocal\n\n```bash\nprojects$ npm uninstall generator-webpack-preact\n```\n\nGlobal\n\n```bash\nprojects$ npm uninstall -g generator-webpack-preact\n```\n\n# ISSUE\n\nPlease use the issue tab to request a:\n\n* Bug\n* Feature\n\nChoose template and report a bug or feature you want [issues](https://github.com/prod3v3loper/generator-webpack-preact/issues).\n\n# CONTRIBUTE\n\nPlease read the [contributing](https://github.com/prod3v3loper/generator-webpack-preact/blob/master/.github/CONTRIBUTING.md) to contribute.\n\n# VULNERABILITY\n\nPlease use the Security section for privately reporting a [vulnerability](https://github.com/prod3v3loper/generator-webpack-preact/security).\n\n# PACKAGE\n\nYou find generator-webpack-preact in [Yeoman generator](https://yeoman.io/generators/), [NPM](https://www.npmjs.com/) and on [Github](https://github.com/).\n\n[NPM - generator-webpack-preact](https://www.npmjs.com/package/generator-webpack-preact)\n\n[GitHub - generator-webpack-preact](https://github.com/prod3v3loper/generator-webpack-preact)\n\n[Github Theme - generator-webpack-preact](https://prod3v3loper.github.io/generator-webpack-preact/)\n\n# AUTHOR\n\n[prod3v3loper](https://www.prod3v3loper.com)\n\n# SUPPORT\n\n[Hyperly](https://www.hyperly.de)\n\n# LICENSE\n\n[MIT](https://github.com/prod3v3loper/generator-webpack-preact/blob/master/LICENSE)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprod3v3loper%2Fgenerator-webpack-preact","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fprod3v3loper%2Fgenerator-webpack-preact","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fprod3v3loper%2Fgenerator-webpack-preact/lists"}