# laravel-elixir-react-hmr

> Laravel Elixir extension for using React with BrowserSync, HMR and React Hot Reload

Latest version **1.0.4** (published 2017-01-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install laravel-elixir-react-hmr
pnpm add laravel-elixir-react-hmr
yarn add laravel-elixir-react-hmr
bun add laravel-elixir-react-hmr
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.4 |
| Published | 2017-01-18 |
| First published | 2016-09-27 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 12 |
| Known vulnerabilities | 0 (+1 in 1 direct dependencies) |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Pawan Samdani |
| Maintainers | pawaniitd |
| Keywords | laravel, elixir, webpack, browsersync, hrm, react, react hot loader |

## Links

- npm: https://www.npmjs.com/package/laravel-elixir-react-hmr
- Repository: https://github.com/eumentis/laravel-elixir-react-hmr
- Homepage: https://github.com/eumentis/laravel-elixir-react-hmr#readme
- Issues: https://github.com/eumentis/laravel-elixir-react-hmr/issues
- npm.io page: https://npm.io/package/laravel-elixir-react-hmr

## Dependencies (12)

- [react](https://npm.io/package/react.md) ^15.3.2
- [webpack](https://npm.io/package/webpack.md) ^1.13.2
- [react-dom](https://npm.io/package/react-dom.md) ^15.3.2
- [babel-core](https://npm.io/package/babel-core.md) ^6.14.0
- [babel-loader](https://npm.io/package/babel-loader.md) ^6.2.5
- [browser-sync](https://npm.io/package/browser-sync.md) ^2.16.0
- [react-hot-loader](https://npm.io/package/react-hot-loader.md) ^3.0.0-beta.5
- [babel-preset-react](https://npm.io/package/babel-preset-react.md) ^6.11.1
- [babel-preset-es2015](https://npm.io/package/babel-preset-es2015.md) ^6.14.0
- [babel-preset-stage-0](https://npm.io/package/babel-preset-stage-0.md) ^6.5.0
- [webpack-dev-middleware](https://npm.io/package/webpack-dev-middleware.md) ^1.8.2
- [webpack-hot-middleware](https://npm.io/package/webpack-hot-middleware.md) ^2.12.2

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.0.4 (latest) — 2017-01-18
- 1.0.3 — 2016-09-27
- 1.0.2 — 2016-09-27
- 1.0.1 — 2016-09-27
- 1.0.0-dev.1 — 2016-09-27
- 1.0.0-dev — 2016-09-27

## README

# laravel-elixir-react-hmr

> Working demo : [laravel-elixir-react-hmr-demo](https://github.com/eumentis/laravel-elixir-react-hmr-demo)

*This is for development only. Should not be used on production servers.*

For one of my projects, I planned to use Laravel for backend and React for frontend. I decided to use Webpack for bundling all my JS files (to use features like [HMR](https://webpack.github.io/docs/hot-module-replacement.html
) and [React Hot Loader](https://github.com/gaearon/react-hot-loader) for development) and Laravel Elixir for all other assets (css, images, fonts, etc.). I also wanted to use BrowserSync for laravel livereloads and multi-device testing. Thus, I wanted to connect Webpack bundler with Laravel and serve it using BrowserSync. 

Jeffery Way has created official Webpack and BrowserSync extensions for Laravel. His Webpack extension does not support webpack-dev-server, HMR and React Hot Loader. Also there is no support for connecting the Webpack output to BrowserSync. I was not able to find any article or package that achieved this. Therefore I decided to develop a Laravel Elixir extension for it.

I am a self-learned programmer/developer and this is my first public package.

## Features
* Laravel 5+ backend server and React frontend
* Webpack for Javascript compilation and Laravel Elixir for all non-JS assets
* Multiple input JS files supported (for multi-page application)
* BrowserSync support (LiveReload non-JS assets, multi-device testing)
* ES6 and React compilation using Babel
* Webpack hot module replacement and hot loading of React components (React Hot Loader 3)

## Usage
At the moment, users cannot change or provide custom Webpack and BrowserSync configuration.

### Step 1 : Install
```bash
npm i -D laravel-elixir-react-hmr
```
### Step 2 : Setup
```javascript
// Add to gulpfile.js
require('laravel-elixir-react-hmr');
```
Use just like any other Laravel Elixir tasks [i.e. mix.taskName(options)]
```javascript
elixir(function(mix) {
    mix.react(options);
});
```
The config options are provided in the form of Javascript object.
#### Options
```javascript
// The values given below are the default values
{
    // The URL of your Laravel dev server
    proxy: 'homestead.app',
    
    // List of relative paths (w.r.t '/resources/assets/js') of the input Javascript files
    inputFiles: [
        './app.js'
    ],
    
    // The relative path (w.r.t '/public/js') of the bundled JS output folder
    // The output dir must always be inside the '/public' directory as the application is served from the '/public' dir
    outputDir: './',
    
    // OPTIONAL
    // IP address to use for BrowserSync external URL (used for multi-device access)
    //      Sometimes BrowserSync sets the wrong IP address and external URL doesn't work.
    host: ''
}
```

### Step 3 : Running
To start the BrowserSync server
```bash
gulp watch
```
Open `http://localhost:3000` in your browser to load the app.
*Does not work in IE*

## Notes
* Wrapper must be added to the root React component for hot reloading to work ([read details](https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915))
   * Have a look at `/resources/assets/js/app.js` in the demo : [laravel-elixir-react-hmr-demo](https://github.com/eumentis/laravel-elixir-react-hmr-demo)
   
* Changes to PHP files will reload the page and the React state would be lost.

## Future features
* Bundling JS for production
* Custom Webpack config
* Custom BrowserSync config

---
_Source: https://npm.io/package/laravel-elixir-react-hmr · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._