{"id":16099188,"url":"https://github.com/lagleki/webpack-typescript-rust-boilerplate","last_synced_at":"2025-04-05T22:44:11.614Z","repository":{"id":44339379,"uuid":"503105166","full_name":"lagleki/webpack-typescript-rust-boilerplate","owner":"lagleki","description":null,"archived":false,"fork":false,"pushed_at":"2023-12-19T13:46:58.000Z","size":97039,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-26T20:01:41.604Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/lagleki.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["pnikolov"]}},"created_at":"2022-06-13T20:28:04.000Z","updated_at":"2022-07-09T08:54:00.000Z","dependencies_parsed_at":"2022-09-19T07:01:13.026Z","dependency_job_id":"6e41cb92-8441-434b-b917-5353ce693b1d","html_url":"https://github.com/lagleki/webpack-typescript-rust-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lagleki%2Fwebpack-typescript-rust-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lagleki%2Fwebpack-typescript-rust-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lagleki%2Fwebpack-typescript-rust-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lagleki%2Fwebpack-typescript-rust-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lagleki","download_url":"https://codeload.github.com/lagleki/webpack-typescript-rust-boilerplate/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247411193,"owners_count":20934650,"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":[],"created_at":"2024-10-09T18:26:15.519Z","updated_at":"2025-04-05T22:44:11.592Z","avatar_url":"https://github.com/lagleki.png","language":"JavaScript","funding_links":["https://github.com/sponsors/pnikolov"],"categories":[],"sub_categories":[],"readme":"# Webpack 5 Typescript Rust Boilerplate Template\n\n![Maintenance](https://img.shields.io/maintenance/yes/2022?logo=github)\n![webpack-current](https://img.shields.io/badge/webpack-v5.73.0-green?logo=webpack)\n![node-current (scoped)](https://img.shields.io/node/v/webpack-typescript-rust-boilerplate)\n[![Build Status](https://app.travis-ci.com/lagleki/webpack-typescript-rust-boilerplate.svg?branch=master)](https://app.travis-ci.com/github/lagleki/webpack-typescript-rust-boilerplate)\n[![webpack-typescript-rust-boilerplate](https://snyk.io/advisor/npm-package/webpack-typescript-rust-boilerplate/badge.svg)](https://snyk.io/advisor/npm-package/webpack-typescript-rust-boilerplate)\n[![GitHub Issues](https://img.shields.io/github/issues-raw/lagleki/webpack-typescript-rust-boilerplate)](https://github.com/lagleki/webpack-typescript-rust-boilerplate/issues)\n[![Known Vulnerabilities](https://snyk.io/test/github/lagleki/webpack-typescript-rust-boilerplate/badge.svg?targetFile=package.json)](https://snyk.io/test/github/lagleki/webpack-typescript-rust-boilerplate?targetFile=package.json)\n[![npm](https://img.shields.io/npm/dm/webpack-typescript-rust-boilerplate)](https://www.npmjs.com/package/webpack-typescript-rust-boilerplate)\n[![GitHub License](https://img.shields.io/github/license/lagleki/webpack-typescript-rust-boilerplate)](https://github.com/lagleki/webpack-typescript-rust-boilerplate/blob/master/LICENSE)\n\nBased on [https://github.com/WeAreAthlon/frontend-webpack-boilerplate](WeAreAthlon/frontend-webpack-boilerplate) with additions of Rust and TypeScript.\n\n## Demo\n\n\u003c!-- * [Demo page demonstrating building - SASS, JavaScript, Images, Fonts, HTML] --\u003e\n\nTable of Contents\n=================\n\n   * [Webpack 5 Typescript Rust Boilerplate Template](#webpack-5-typescript-rust-boilerplate-template)\n      * [Demo](#demo)\n      * [Features](#features)\n      * [Requirements](#requirements)\n   * [Setup](#setup)\n      * [Installation](#installation)\n      * [Define Package Metadata](#define-package-metadata)\n   * [Configuration](#configuration)\n      * [Environment Configuration](#environment-configuration)\n      * [Additional webpack configuration](#additional-webpack-configuration)\n   * [Development](#development)\n      * [Assets Source](#assets-source)\n      * [Build Assets](#build-assets)\n         * [One time build assets for development](#one-time-build-assets-for-development)\n         * [Build assets and enable source files watcher](#build-assets-and-enable-source-files-watcher)\n         * [Start a development server - reloading automatically after each file change.](#start-a-development-server---reloading-automatically-after-each-file-change)\n   * [Production](#production)\n      * [Build Assets](#build-assets-1)\n      * [Get Built Assets](#get-built-assets)\n   * [Run Code Style Linters](#run-code-style-linters)\n      * [SASS](#sass)\n      * [JavaScript](#javascript)\n   * [Additional Tools](#additional-tools)\n      * [Run Assets Bundle Analyzer](#run-assets-bundle-analyzer)\n      * [Continuous Integration](#continuous-integration)\n\n## Features\n\n* **Simple setup** instructions\n  * Start development of a project right away with **simple**, **configured**, **linter enabled**, **browser synced** asset files.\n* Configuration per **environment**\n  * `development` - [`sourcemaps`](https://webpack.js.org/configuration/devtool/), [`browser synced developmentment server`](https://webpack.js.org/configuration/dev-server/)\n  * `production` - [`minification`](https://webpack.js.org/plugins/terser-webpack-plugin/), [`sourcemaps`](https://webpack.js.org/configuration/devtool/)\n* Configurable **browsers versions support**. It uses [`browserslist`](https://github.com/browserslist/browserslist#full-list) - just specify the browsers you want to support in the `package.json` file for `browserslist`:\n\n```js\n\"browserslist\": [\n    \"last 2 versions\",\n    \"\u003e 5%\"\n]\n```\n* The built CSS / JavaScript files will respect the **configured supported browser versions** using the following tools:\n  * [`autoprefixer`](https://github.com/postcss/autoprefixer) - automatically adds vendor prefixes to CSS rules\n  * [`babel-preset-env`](https://babeljs.io/docs/en/babel-preset-env) - smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (*and optionally, browser polyfills*) are needed by your target environment(s).\n* Demo project files to be used as a reference and **example demo** building of:\n  * *JavaScript*\n  * *SASS / PostCSS*\n  * *HTML* templates\n  * *Images* (*CSS backgrounds and image tags*)\n  * *Fonts*\n* Support for **assets optimization** for production environment with ability to configure:\n  * **Code Minification** of *JavaScript* and *CSS* processed files.\n  * **Optimize Assets Loading** - inline and embed **images** / **fonts** files having file size below a *configurable* threshold value.\n  * **Images Optimisation** - optimize `jpeg`, `jpg`, `png`, `gif`, `svg` filesize and loading type via [`imagemin`](https://github.com/imagemin/imagemin). Plugin and Loader for webpack to optimize (*compress*) all images using `imagemin`. Do not worry about size of images, now they are always optimized/compressed.\n* Support for **source code syntax style and formatting linters** that analyze source code to flag any programming errors, bugs, stylistic errors or suspicious constructs:\n  * **SASS/PostCSS syntax cheker** - you can change or add additional rules in `.sasslintrc` file. Configuration options can be found on [`sass-lint`](https://github.com/sasstools/sass-lint/blob/master/lib/config/sass-lint.yml) documentation.\n  * **JavaScript syntax checker** - following the `airbnb` style, you can review and configure the rules in `.eslintrc` file. Configuration options can be found on [`eslint`](https://eslint.org/docs/user-guide/configuring) documentation.\n* Latest [Webpack 5](https://github.com/webpack/webpack) - *JavaScript* module bundler.\n* Latest [SASS/PostCSS](https://github.com/sass/sass) compiler based on Dart `sass`.\n* Latest [Babel 7](https://github.com/babel/babel) (`@babel/core`) - JavaScript compiler - _Use next generation JavaScript, today._\n* Integration with [Travis CI](https://travis-ci.com/)\n  * [Demo deployment available to GitHub pages](https://weareathlon.github.io/frontend-webpack-boilerplate/)\n* Configured and ready to use **Webpack Dev Server** plugin for faster local development - [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/)\n* Integration with [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer) - _Visualize size of webpack output files with an interactive zoomable treemap._\n\n## Requirements\n\n* `node` : `\u003e=16`\n* `yarn` : `\u003e=2`\n\n# Setup\n\n## Installation\n\n1. Choose and download the latest template release from [List of Releases](https://github.com/lagleki/webpack-typescript-rust-boilerplate/releases).\n2. Extract the release archive to a new directory, rename it to your project name and browse the directory.\n3. Install all dependencies using the following command: \n\n```sh \n$ yarn install --immutable  --immutable-cache --check-cache\n```\n\n## Define Package Metadata\n\n* Amend `package.json` file and optionally specify:\n  * `name` - Name of your project. A name can be optionally prefixed by a scope, e.g. `@myorg/mypackage`.\n  * `version` - Specify and maintain a version number indicator for your project code.\n  * `author` - Your organisation or just yourself. You can also specify [`contributors`](https://docs.npmjs.com/files/package.json#people-fields-author-contributors).\n  * `description` - Short description of your project.\n  * `keywords` - Put keywords in it. It’s an array of strings.\n  * `repository` - Specify the place where your code lives.\n  * `license` - Announce your code license, figure out the license from [Choose an Open Source License](https://choosealicense.com) .\n  * `browserslist` - Specify the supported browsers versions - you can refer to [full list](https://github.com/browserslist/browserslist#full-list) of availalbe options.\n\n# Configuration\n\n## Environment Configuration\n\n* Edit the [`configuration/environment.js`](configuration/environment.js) if you want to specify:\n  * **`server`**: configure development server, specify `host`, `port`. Refer to the full development server configuration options for [`webpack-dev-server`](https://webpack.js.org/configuration/dev-server/).\n  * **`limits`**: configure file size thresholds for assets optimizations.\n    * Image/Font files size in bytes. Below this value the image file will be served as Data URL (_inline base64_).\n  * **`paths`**: `src` or `dist` directories names and file system location.\n\n## Additional `webpack` configuration\n\nYou can additionally configure `webpack` for specific environment:\n* `development` - [`configuration/webpack.dev.config.js`](configuration/webpack.dev.config.js)\n* `production` - [`configuration/webpack.prod.config.js`](configuration/webpack.prod.config.js)\n  * Note that if you prefer to build and deploy [`sourcemap`](https://webpack.js.org/configuration/devtool/#production) files:\n\u003e You should configure your server to disallow access to the Source Map file for normal users!\n\n# Development\n\n## Assets Source\n\n* **SASS/PostCSS** files are located under `src/scss/`\n* **JavaScript** files with support of latest ECMAScript _ES6 / ECMAScript 2016(ES7)/ etc_ files are located under `src/js/`\n* **Image** files are located under `src/images/`\n* **Font** files are located under `src/fonts/`\n* **HTML** files are located under `src/`\n  * It will **automatically** build **all HTML files** placed under `src/` directory, no need to manually configure each template anymore!\n\n## Build Assets\n\n### One time build assets for development\n\n```sh\n$ yarn build\n```\n\n### Build assets and enable source files watcher\n\n```sh\n$ yarn watch\n```\n\nThis command is suitable if you develop with external web server.\n\n\u003e **Note:** File watching does not work with *NFS* (*Windows*) and virtual machines under *VirtualBox*. Extend the configuration in such cases by:\n\n```js\nmodule.exports = {\n  //...\n  watchOptions: {\n    poll: 1000 // Check for changes every second\n  }\n};\n```\n\n### Start a development server - reloading automatically after each file change.\n\n```sh\n$ yarn dev\n```\n\n# Production \n\n## Build Assets\n\nOptimize assets for production by:\n\n```sh\n$ yarn production\n```\n\n## Get Built Assets\n\n* _CSS_ files are located under `/dist/css/`\n* _JavaScript_ files with support of _ES6 / ECMAScript 2016(ES7)_ files are located under `/dist/js/`\n* _Images_ are located under `/dist/images/`\n  * Images part of the _design_ (_usually referenced in the CSS_) are located under `/dist/images/design/`\n  * Images part of the _content_ (_usually referenced via `\u003cimg\u003e` tags_) are located under `/dist/images/content/`\n* _Fonts_ are located under `/dist/fonts/`\n* _HTML_ files are located under `/dist/`\n\n# Run Code Style Linters\n\n## SASS\n\n```sh\n$ yarn lint:sass\n```\n## JavaScript\n\n```sh\n$ yarn lint:js\n```\n\n# Additional Tools\n\n## Run Assets Bundle Analyzer\n\n```sh\n$ yarn stats\n```\n\n\u003e This will open the visualisaion on the default configuraiton URL `localhost:8888`, you can change this URL or port following the [package](https://github.com/webpack-contrib/webpack-bundle-analyzer#options-for-cli) documentation.\n\n## Continuous Integration\n\nThis boilerplate template contains integration with [Travis CI](https://travis-ci.org/). The build system runs all linting scripts and deploys production optimized pages to _GitHub_ pages upon push to the `master` branch. However, note that this deployment flow only works for _Project Pages_, as User and Organization pages [only support the master branch flow](https://help.github.com/articles/user-organization-and-project-pages/).\n\nFor more information on how to set up alternative deployment processes, check out the [Travis CI documentation on deployment](https://docs.travis-ci.com/user/deployment). The service can deploy to dozens of cloud providers, including Heroku, AWS, and Firebase.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flagleki%2Fwebpack-typescript-rust-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flagleki%2Fwebpack-typescript-rust-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flagleki%2Fwebpack-typescript-rust-boilerplate/lists"}