{"id":14972254,"url":"https://github.com/lomboboo/webpack-typescript-boilerplate","last_synced_at":"2025-07-13T11:33:18.548Z","repository":{"id":241295462,"uuid":"79375860","full_name":"lomboboo/webpack-typescript-boilerplate","owner":"lomboboo","description":"Simple Webpack 2/Typescript 2 starter kit","archived":false,"fork":false,"pushed_at":"2018-06-14T16:59:57.000Z","size":1104,"stargazers_count":43,"open_issues_count":0,"forks_count":4,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-31T22:23:33.319Z","etag":null,"topics":["bootstrap-4","bootstrap3","bootstrap4","javascript","karma","less","sass","scss","seed","starter-kit","template-project","typescript","webpack","webpack2"],"latest_commit_sha":null,"homepage":"","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/lomboboo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-01-18T19:28:09.000Z","updated_at":"2024-08-16T18:44:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"69d6a502-f107-485a-a19e-dfef5fde6b84","html_url":"https://github.com/lomboboo/webpack-typescript-boilerplate","commit_stats":null,"previous_names":["lomboboo/webpack-typescript-boilerplate"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lomboboo%2Fwebpack-typescript-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lomboboo%2Fwebpack-typescript-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lomboboo%2Fwebpack-typescript-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lomboboo%2Fwebpack-typescript-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lomboboo","download_url":"https://codeload.github.com/lomboboo/webpack-typescript-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238386119,"owners_count":19463303,"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":["bootstrap-4","bootstrap3","bootstrap4","javascript","karma","less","sass","scss","seed","starter-kit","template-project","typescript","webpack","webpack2"],"created_at":"2024-09-24T13:46:38.057Z","updated_at":"2025-02-11T23:32:33.207Z","avatar_url":"https://github.com/lomboboo.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ca align=\"center\" href=\"https://webpack.js.org/\"\u003e\n  \u003cimg width=\"440\" src=\"https://cdn-images-1.medium.com/max/1920/1*gdoQ1_5OID90wf1eLTFvWw.png\" /\u003e\n\u003c/a\u003e\n\n\u003e The simpliest way to use this Starter is to use__ [npm package pingue-cli](https://www.npmjs.com/package/pingue-cli). Github page of [pingue-cli](https://github.com/lomboboo/pingue-cli)\n\n# Webpack 2 Typescript Starter\nJavascript custom starter kit that includes:\n\u003e [Webpack 2](https://webpack.js.org/), [TypeScript 2](http://www.typescriptlang.org/), [Istanbul](https://github.com/gotwarlost/istanbul), [Mocha](https://mochajs.org/), [Karma](https://karma-runner.github.io/), [@types](https://www.npmjs.com/~types), [TsLint](http://palantir.github.io/tslint/), [Handlebars](http://handlebarsjs.com/).\n\n# Table of contents:\n* [Start](#start)\n  * [Get project](#get-project)\n  * [Installing](#installing)\n  * [Usage](#usage)\n* [File structure](#file-structure)\n* [Configuration](#configuration)\n  * [Bootstrap 4](#bootstrap-4)\n  * [New pages](#new-pages)\n* [@types and NODE_ENV variables](#types-and-node_env-variables)\n\n## Start \nTo start using this seed you need to clone or download it first.\n## Get project\n```bash\n# clone to your own project directory\ngit clone git@github.com:lomboboo/webpack2-typescript-seed.git project-name\n\n# remove .git directory and initialize git on your own\ncd project-name\nrm -rf ./.git\ngit init\n```\n## Installing\n```bash\n# then inside project directory install dependencies with npm\nnpm install\n```\n## Usage\n```bash\n# to start develop run :\nnpm start\n# you can access app from http://localhost:8000\n\n# to make build from the project run:\nnpm run build\n\n# to run tests use:\nnpm run test\n```\n\n## File structure\nSchema of the project file structure:\n```\nwebpack2-typescript-seed/\n ├──config/                        * configuration\n │   ├──helper.js                  * helper functions: ex., root() for getting root of the project\n │   ├──karma.conf.js              * karma config for unit tests\n │   ├──webpack.dev.js             * webpack development config\n │   ├──webpack.prod.js            * webpack production config\n │   └──webpack.test.js            * webpack testing config\n │\n ├──src/                           * our source files that will be compiled to javascript\n │   ├──app/                       * application directory, for applicaton files and test files\n │   │\n │   ├──partials/                  * partial files: ex., header.hbs, footer.hbs\n │   │\n │   └──public/                    * static assets\n │   │   ├──css/                   * css for 3-rd party libraries: ex., animate.css\n │   │   ├──font/                  * fonts go here\n │   │   ├──img/                   * project static images\n │   │   └──meta/                  * meta data: ex., favicons\n │   │\n │   └──stylesheets/               * less files for styling\n │   \n │\n ├──.editorconfig                  * basic rules for different IDE http://editorconfig.org/\n ├──.gitignore                     * files and directories to be ignored by GIT\n ├──LICENCE                        * Licence information\n ├──mocha.setup.js                 * //TODO\n ├──postcss.config.js              * //TODO: delete\n ├──REAMME.md                      * read to start using repo\n ├──tsconfig.json                  * typescript config used outside webpack\n ├──tslint.json                    * typescript lint config\n └──webpack.common.config.js       * webpack common configuration file, used by different environments\n\n```\n\n## Configuration\nConfiguration files live in config/ . Current version can configure webpack and karma settings for different environments.\nWebpack in configured to include 3-rd party libraries into separate **vendor.js** file. To do that just add 3-rd party libraries to \n```javascript\nentry: {\n      ...\n      vendor: [ ..., \"your-library\" ]\n    },\n```\nin ``webpack.common.config.js`` file.\n\n### Bootstrap 4\nProject uses Bootstrap 4 and [bootstrap-loader](https://github.com/shakacode/bootstrap-loader), which is flexible to configure by editing ``.bootstraprc`` file in the root directory. For simplicity **most of the Bootstrap 4 featues were disabled** in the ``.bootstraprc`` file. Fell free to configure it as you wish.\n\n### New pages\nTo add new page just add another in the ``webpack.common.config.js`` file under the ``plugins`` like so:\n```javascript\nplugins: [\n...\n  new HtmlWebpackPlugin( {\n    filename: 'new-page.html',\n    chunks: [ \"common\", \"vendor\", \"bootstrap\", \"manifest\", \"about\" ],\n    template: help.root( \"src/new-page.hbs\" )\n  } ),\n...\n]\n```\n\nYou can also redefine basic variables in the ``config/bootstrap-pre-customizations.scss`` file. For fulll reference read the [docs](https://github.com/shakacode/bootstrap-loader).\n\n## @types and NODE_ENV variables\n\nWhen including 3-rd party modules or libraries you should also install their type definitions with [@types](https://www.npmjs.com/~types) like so:\n\n```bash\nnpm install @types/lodash\nnpm install @types/jquery\nnpm install @types/moment\n```\n\nAnother helpful thing is that you can access global Node variable when developing, building for production or testing app. \n\nDuring **development** (npm start) you can access \n```javascript\nconst ENV = process.env.NODE_ENV\n\n``` \n\n```ENV``` will be equal to ```'dev'```.\n\nWhen you build application for **production** ```process.env.NODE_ENV``` will be equal to ```'prod'```.\n\nFor **tests** ```process.env.NODE_ENV``` will have value of ```'test'```.\n\n## TODO:\n* tslint - add advanced rules, look [reference](https://github.com/airbnb/javascript)\n* tests - configuration for E2E tests\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flomboboo%2Fwebpack-typescript-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flomboboo%2Fwebpack-typescript-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flomboboo%2Fwebpack-typescript-boilerplate/lists"}