Light

raodurgesh-zz / react-app-rewire-build-dev Goto Github PK

View Code? Open in Web Editor NEW

4.0 0.0 3.0 674 KB

Source code files used by `webpack-dev-server` is rendered in watch mode at user specified directory without ejecting create-react-app application

JavaScript 77.66% HTML 19.75% CSS 2.59%

react-app-rewire-build-dev's Introduction

react-app-rewire-build-dev

Source code files used by webpack-dev-server is rendered in watch mode at user specified directory without ejecting create-react-app.

For latest version of CRA,

refer to this link :

Why do I need this?

As of now (21/06/2018), create-react-app (more precisely react-scripts) does not allow development builds to be written to the disk because it uses webpackDevServer to serve your build files and folders (for good reasons). The problem is that in some cases you need to have these files written to the disk i.e:

Developing browser extensions using React.
Incorporating your React application into an existing application.
Serving your React app with a dedicated backend.

Installation

yarn add --dev react-app-rewire-build-dev

or

npm install --save-dev  react-app-rewire-build-dev

Usage

In the config-overrides.js (refer : react-app-rewired) you created for react-app-rewire-build-dev add this code:

const reactAppRewireBuildDev = require('react-app-rewire-build-dev');

/* config-overrides.js */

const options = {
  outputPath : "<location of watch directory i.e. '../server/build' >",  /***** required *****/
  basename : "<location of subdirectory>", // deploy react-app in a subdirectory /***** optional *****/
  hotReloadPort : "<port of webpack-server>" // default:3000,simply relaod the webpage on changes./***** optional *****/
}

module.exports = function override(config, env) {
  return reactAppRewireBuildDev(config, env, options);
}

Inspirations

write-file-webpack-plugin by @gajus

react-app-rewire-build-dev's People

Contributors

Stargazers

Forkers

joshgeller mcroengineering krossmaskinen

react-app-rewire-build-dev's Issues

It doesn't work with the latest react-app-rewire and customize-cra

Hi @raodurgesh , I just need this kind feature recently so I tried this lib, but unfortunately, it doesn't work for my project, report the following error message after running yarn start:

.../node_modules/webpack/lib/Compiler.js:713
		throw this._error();
		^

Error: Content and Map of this Source is no longer available (only size() is supported)
    at SizeOnlySource._error (.../node_modules/webpack/lib/Compiler.js:699:10)
    at SizeOnlySource.source (.../node_modules/webpack/lib/Compiler.js:713:14)
    at .../node_modules/react-app-rewire-build-dev/dist/write-file.js:151:47
    at .../node_modules/lodash/lodash.js:4905:15
    at baseForOwn (.../node_modules/lodash/lodash.js:2990:24)
    at .../node_modules/lodash/lodash.js:4874:18
    at Function.forEach (.../node_modules/lodash/lodash.js:9342:14)
    at handleAfterEmit (.../node_modules/react-app-rewire-build-dev/dist/write-file.js:131:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.../node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:7:1)
    at AsyncSeriesHook.lazyCompileHook (.../node_modules/tapable/lib/Hook.js:154:20)
    at asyncLib.forEachLimit.err (.../node_modules/webpack/lib/Compiler.js:482:27)
    at .../node_modules/neo-async/async.js:2818:7
    at done (.../node_modules/neo-async/async.js:3522:9)
    at AsyncSeriesHook.eval [as callAsync] (eval at create (.../node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at outputFileSystem.writeFile.err (.../node_modules/webpack/lib/Compiler.js:447:33)
    at MemoryFileSystem.writeFile (.../node_modules/memory-fs/lib/MemoryFileSystem.js:328:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed.
Exit code: 1
Command: .../.nvm/versions/node/v10.15.3/bin/node
Arguments: /usr/local/Cellar/yarn/1.21.1/libexec/lib/cli.js run watch

Can you have a look when you are free, thanks!

My project use:

"react-app-rewired": "^2.1.5",
"customize-cra": "^0.9.1",

The config-overrides.js:

const { override } = require('customize-cra')
const addYaml = require('react-app-rewire-yaml')
const reactAppRewireBuildDev = require('react-app-rewire-build-dev')

const watchDev = () => (config) => {
  console.log(process.env.NODE_ENV)
  if (process.env.NODE_ENV === 'development') {
    const options = {
      outputPath: './build',
      basename: '/dashboard',
    }
    config = reactAppRewireBuildDev(config, process.env, options)
  }
  return config
}

module.exports = override(watchDev(), addYaml)

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.