generator-webpack-preact

    1.2.9 • Public • Published

    📦 Generator Webpack Preact

    Language Codacy Badge Travis CI NPM Version NPM Donwloads Github Latest Release Version Github Downloads Commits License Issues Languages Dependencies status Minified Gzipped

    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)
    • Plugins inside and ready to add more.
    • 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

    Support

    Hyperly

    License

    MIT - prod3v3loper

    Install

    npm i generator-webpack-preact

    DownloadsWeekly Downloads

    29

    Version

    1.2.9

    License

    MIT

    Unpacked Size

    46.8 kB

    Total Files

    26

    Last publish

    Collaborators

    • prod3v3loper