{"id":13438131,"url":"https://github.com/olahol/reactpack","last_synced_at":"2025-03-19T18:32:01.621Z","repository":{"id":50251722,"uuid":"60278909","full_name":"olahol/reactpack","owner":"olahol","description":":package: build your react apps with one command and one `npm i`.","archived":true,"fork":false,"pushed_at":"2016-12-06T15:06:27.000Z","size":117,"stargazers_count":980,"open_issues_count":4,"forks_count":36,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-03-09T10:49:57.469Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/olahol.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-06-02T16:15:11.000Z","updated_at":"2025-03-03T20:47:56.000Z","dependencies_parsed_at":"2022-09-05T15:11:06.404Z","dependency_job_id":null,"html_url":"https://github.com/olahol/reactpack","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/olahol%2Freactpack","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freactpack/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freactpack/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/olahol%2Freactpack/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/olahol","download_url":"https://codeload.github.com/olahol/reactpack/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244483479,"owners_count":20460125,"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-07-31T03:01:03.111Z","updated_at":"2025-03-19T18:32:01.611Z","avatar_url":"https://github.com/olahol.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized","Code Design"],"sub_categories":["Uncategorized","Boilerplate"],"readme":"# ![reactpack](reactpack.png)\n\n[![NPM version][npm-image]][npm-url]\n[![Dependency Status][dep-image]][dep-url]\n[![js-standard-style][standard-image]][standard-url]\n\nOne command to build your React frontend.\n\n## Features\n\n- Unified package, only one `npm i` needed.\n- Linting with your `.eslintrc` or with `standard`.\n- Smartly merges existing `.babelrc` and `webpack.config.js` into configuration.\n- ES6 with Babel presets `react`, `es2015` and `stage-0`.\n- PostCSS with `precss` and `autoprefixer`.\n- Style extraction into dedicated css bundle.\n- Include enviroment variables with an `.env.js` file.\n- Automatic index.html creation with `html-webpack-plugin`.\n- Source maps for styles and scripts.\n- Watch mode (`--watch`).\n- Development server mode (`--dev`).\n- Toggle optimizations with `uglify` and `cssnano` (`-O`).\n\n## Table of Contents\n\n  * [Features](#features)\n  * [Install](#install)\n  * [Example](#example)\n  * [FAQ](#faq)\n    * [How do I use another linter than `standard`?](#how-do-i-use-another-linter-than-standard)\n    * [How do I customize index.html?](#how-do-i-customize-indexhtml)\n    * [How do I add other loaders?](#how-do-i-add-other-loaders)\n  * [CLI](#cli)\n  * [Tested on](#tested-on)\n  * [Contributors](#contributors)\n\n## Install\n\n```\n$ npm i reactpack -g\n```\n\nor for use in `scripts` section of `package.json`\n\n```\n$ npm i reactpack --save-dev\n```\n\n## Example\n\n```js\nimport React, { Component } from 'react'\nimport { render } from 'react-dom'\n\nrequire('bootstrap/dist/css/bootstrap.css')\n\nclass Example extends Component {\n  render () {\n    return \u003ch1\u003eHello World!\u003c/h1\u003e\n  }\n}\n\nrender(\u003cExample /\u003e, document.getElementById('react-app'))\n```\n\n```javascript\n{\n  ...\n  \"scripts\": {\n    \"build\": \"reactpack src/index.js\",\n  },\n  \"dependencies\": {\n    \"bootstrap\": \"^3.3.6\",\n    \"react\": \"^15.1.0\",\n    \"react-dom\": \"^15.1.0\",\n  },\n  \"devDependencies\": {\n    \"reactpack\": \"^0.2.0\"\n  },\n  ...\n}\n```\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/olahol/reactpack/master/demo.gif\" alt=\"reactpack\"/\u003e\n\u003c/p\u003e\n\n## FAQ\n\n##### How do I use another linter than `standard`?\n\n`reactpack` will look for an eslint config (`.eslintrc`, `.eslintrc.json` ...) and if one is present\nit will use that one. Make sure that you have all the dependencies installed (plugins etc) to run your linter.\n\n##### How do I customize index.html?\n\nPlace an `index.ejs` file in the same directory as your entry script and `reactpack` will use it\nfor generating html. The default `index.ejs` looks like:\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta http-equiv=\"Content-type\" content=\"text/html; charset=utf-8\"/\u003e\n    \u003ctitle\u003e\u003c%= htmlWebpackPlugin.options.title %\u003e\u003c/title\u003e\n    \u003c% if (htmlWebpackPlugin.options.dev) { %\u003e\n    \u003cscript src=\"http://localhost:\u003c%= htmlWebpackPlugin.options.port %\u003e/webpack-dev-server.js\"\u003e\u003c/script\u003e\n    \u003c% } %\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv id=\"react-app\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\n##### How do I add other loaders?\n\nReactpack merge existing `webpack.config.js` it into its config so for example if\nyou want to add `less-loader` just have a `webpack.config.js` with:\n\n```js\nmodule.exports = {\n  module: {\n    loaders: [\n      {\n        test: /\\.less$/,\n        loader: 'style!css!less'\n      }\n    ]\n  }\n}\n```\n\n## CLI\n\n```\n  Usage: reactpack [options] \u003centry\u003e [path/to/bundle]\n\n  Options:\n\n    -h, --help         output usage information\n    -V, --version      output the version number\n    -q, --quiet        no output\n    -O, --optimize     optimize css and js using minifiers\n    -w, --watch        watch mode, rebuild bundle on file changes\n    -d, --dev          start a dev server with hot module replacement\n    -p, --port \u003cport\u003e  port for dev server (default is 8000)\n    --standard         force standard linting (do not look for eslint config)\n    --clean            delete everything in bundle path before building\n    --absolute-path    use absolute path for assets\n    --no-source-map    don't output source maps for css and js\n    --no-postcss       don't use postcss (autoprefixer and precss)\n    --no-html          don't output an index.html\n    --no-extract       don't extract css into separate bundle\n    --no-lint          turn off linting\n    --no-env           don't try and load .env.js file\n    --no-inject        don't inject bundles into index.html\n```\n\n## Tested on\n\n- Windows 7 with node 6 and npm 3\n- Ubuntu 12.04 with node 6 and npm 3\n- MacOS 10.11 El Capitan with node 5-6 and npm 3\n\n## Contributors\n\n* Ola Holmström (@olahol)\n* Tarjei Huse (@tarjei)\n* Code Hz (@codehz)\n* Erik Huisman (@erikhuisman)\n* charlie hield (@stursby)\n* Niklas (@nikteg)\n* Victor Bjelkholm (@VictorBjelkholm)\n\n[npm-image]: https://img.shields.io/npm/v/reactpack.svg\n[npm-url]: https://npmjs.org/package/reactpack\n[dep-image]: https://david-dm.org/olahol/reactpack/status.svg\n[dep-url]: https://david-dm.org/olahol/reactpack\n[standard-image]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg\n[standard-url]: https://github.com/feross/standard\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folahol%2Freactpack","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Folahol%2Freactpack","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Folahol%2Freactpack/lists"}