{"id":17239086,"url":"https://github.com/binarymuse/react-babel-boilerplate","last_synced_at":"2025-10-06T23:06:52.866Z","repository":{"id":66010572,"uuid":"43224887","full_name":"BinaryMuse/react-babel-boilerplate","owner":"BinaryMuse","description":"Eaisly and quickly create: Web applications w/ React + Babel + HMR -or- Electron apps w/ React + Babel","archived":false,"fork":false,"pushed_at":"2016-01-05T22:26:55.000Z","size":22,"stargazers_count":12,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-07T02:42:33.984Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/BinaryMuse.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2015-09-26T22:06:40.000Z","updated_at":"2022-10-01T05:09:09.000Z","dependencies_parsed_at":"2023-03-17T03:43:18.980Z","dependency_job_id":null,"html_url":"https://github.com/BinaryMuse/react-babel-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/BinaryMuse%2Freact-babel-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinaryMuse%2Freact-babel-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinaryMuse%2Freact-babel-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/BinaryMuse%2Freact-babel-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/BinaryMuse","download_url":"https://codeload.github.com/BinaryMuse/react-babel-boilerplate/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248810883,"owners_count":21165195,"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-15T05:47:42.205Z","updated_at":"2025-10-06T23:06:47.832Z","avatar_url":"https://github.com/BinaryMuse.png","language":"JavaScript","readme":"React + Babel Boilerplate\n=========================\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"http://i.imgur.com/PGH5x3y.png\"\u003e\n\u003c/div\u003e\n\n**Eaisly and quickly create:**\n\n * Web applications with React, Babel, and Hot Module Replacement\n * Electron apps with React and Babel\n\n---\n\nI love React, especially in conjunction with Babel for ES2015+ features and webpack for dealing with all my client-side asset issues, but getting set up on a new project, especially when I just want to toy with an idea, always feels like more work than it should be. This project provides some boilerplate to set up what **I** consider to be a common and useful starter project.\n\nInstructions\n------------\n\n**IMPORTANT**: These operations are **destructive**. They will create, modify, and move files around. Take care if you're running them with uncommitted changes!\n\n 1. Clone this repo, `cd` into it\n 2. Run `./setup/install.sh` from the root of the repository\n 3. **[OPTIONAL]** If you want to build an [Electron](http://electron.atom.io/) app instead of a vanilla web app, run `./setup/electron/install.sh`. **This will delete `client` and `public`.** You still need to have run the previous step.\n 4. Run `npm start` to start your new app\n\nDon't forget to delete the `.git` folder and run your own `git init` so the history is reset!\n\nWhat does it do?\n----------------\n\n### `./setup/install.sh`\n\nThis script sets up the basic project structure. You must run this even if you want to make an Electron app (below).\n\n 1. Creates a new `package.json` file via `npm init -y` (accepts defaults)\n 2. Installs and `--save`s the following packages:\n    * babel-core@^6\n    * babel-loader@^6\n    * babel-plugin-transform-decorators@^6\n    * babel-plugin-transform-object-rest-spread@^6\n    * babel-plugin-transform-react-constant-elements@^6\n    * babel-plugin-transform-react-inline-elements@^6\n    * babel-plugin-transform-runtime@^6\n    * babel-preset-es2015@^6\n    * babel-preset-react@^6\n    * babel-polyfill@^6\n    * babel-register@^6\n    * babel-runtime@^6\n    * core-decorators@^0\n    * express@^4\n    * react@^0\n    * react-dom@^0\n    * webpack@^1\n 3. Installs and `--save-dev`s the following packages:\n    * babel-plugin-react-transform@^2\n    * react-transform-hmr@^1\n    * webpack-dev-middleware@^1\n    * webpack-hot-middleware@^2\n 4. Adds a `start` script that starts Express with hot module replacement enabled in development\n 5. Adds a `build` script that builds the webpack bundles (run this with `NODE_ENV=production`)\n 6. Sets `private` to `true` inside `package.json` (to prevent accidental publishes)\n\n### `./setup/electron/install.sh`\n\nThis script is optional, and **destructively** converts the project into a starter Electron app. It can only be run after `./setup/install.sh` is finished.\n\n**You will lose all data from `client`, `public`, and `server` by running this command.** Be sure you move or check in any files you want to be able to recover.\n\n 1. Installs and `--save-dev`s the latest stable versions of the following packages:\n    * [electron-prebuilt](https://npmjs.com/package/electron-prebuilt)\n    * [electron-rebuild](https://npmjs.com/package/electron-rebuild)\n 2. Changes `package.json` so that:\n    1. Running `npm start` will start the Electron app\n    2. Sets `app/bootstrap.js` as the entry point to the Electron app\n 3. **Deletes** the `client`, `public`, and `server` folders\n 4. Creates a new `app` folder with starter files for a working Electron app\n\n### `.babelrc`\n\nA `.babelrc` file is included that sets options for *both* the basic install *and* the Electron app install.\n\n * Uses the following presets:\n    * react\n    * es2015\n * Uses the following plugins:\n    * transform-object-rest-spread\n    * transform-decorators\n    * transform-runtime\n * Uses the following additional plugins in development\n    * react-transform (with react-transform-hmr)\n * Uses the following additional plugins in production\n    * transform-react-constant-elements (extracts `createElement` calls into constants if possible)\n    * transform-react-inline-elements (transform `createElement` calls into objects)\n\n### webpack config\n\nThe webpack config is *only* used in the basic install (*not* the Electron install).\n\n * `process.env.NODE_ENV` is defined client-side to be the same as server-side, defaulting to `\"development\"`\n * `__DEV__` is defined as a `true`/`false` value reflecting whether `NODE_ENV` is `\"development\"` or not, useful for wrapping debug tools, etc. in `if (__DEV__)`\n * Loads an entry from `./client/index.js`\n * Loads static content from `./public`\n * Builds to `./public/main-bundle.js`\n * In development, it also:\n    * Enables source maps\n * In production, it also:\n    * Enables minification via `UglifyJsPlugin`\n    * Enables `DedupePlugin`\n\nWith the basic install, as you edit the JS file that ships with the repo, the page should update immediately. Syntax errors should show up in your browser console.\n\n### Isn't this basically just like \\\u003cinsert boilerplate generator here\\\u003e?\n\nThis project is designed to generate a very small number of files, with very little magic. Most of the complexity lives in the number of modules installed and the relatively complex Babel/webpack configuration.\n\nThe generator is small and simple enough that you can just delete the `setup` directory after you run the initial setup to clean up all non-essential code.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinarymuse%2Freact-babel-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbinarymuse%2Freact-babel-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbinarymuse%2Freact-babel-boilerplate/lists"}