Integrating Brunch with Create-React-App

TL;DR

Dan Abramov (@gaearon) has hinted that he might like to see a Brunch version of Create-React-App (CRA). I think doing so will help both the React and Brunch communities tremendously. It would be nice if we can get some contributors working on this together.

About Create-React-App

Official Facebook Blogpost Announcing Create-React-App Github for Create-React-App

Work in Progress

My Working Branch (super hacky at the moment) — PRs Welcome!

Using

Brunch React Skeleton

Description

This isn’t so much of a bug as it is an opportunity to get more exposure for the Brunch build tool, which I’m sure we’ll all agree is one of the best and fastest ways to be productive with React. With Brunch, we can achieve simplicity and speed while still maintaining a lot of configurability.

I recently updated my article on Brunch vs Webpack here. And I tweeted it out to the twittersphere. I was very surprised when I received the following tweet from none other than Dan Abramov himself:

— Link to Twitter Conversation

Current CRA behavior

I’ll briefly explain what CRA does here, but I highly recommend you actually go try to run it yourself or at least read the blog article announcing it.

The main functions of CRA are: start, build, eject.

Since CRA is a command-line tool, it works by forwarding calls to a scripts folder that contains node scripts written in javascript. This file manages the forwarding of the command line arguments to the scripts folder.

• start: This creates a Webpack compiler using a config file and then starts a WebpackDevServer.
• build: This simply uses Webpack to compile an optimized production build.
• eject: This converts the simplified app into a complete Webpack app with all of its numerous config files.

I should also mention that init.js is how the simplified app is first created. Usually, the user would run the following command to create their app:

create-react-app my-app

What I have done

On my working branch, I have already (kind of) gotten the start functionality to work with the React Skeleton repo. It’s a little hacky though, because I simply use shelljs to run brunch watch --server. You’ll notice that I even had to cd into the template folder for development purposes. Obviously, this should be taken out later on.

Note also, that I changed the build output folder to /build instead of the default /public.

Anyway, go to the branch and take a look at my commits to see what I have done (which unfortunately, is not too much yet).

What needs to be done

I’ll only talk about the start functionality as the build and eject functionality has yet to be attempted.

Flatten folder structure

The output from CRA is currently a single src folder inside their app folder. And inside this src folder, they have all of the styles and components in a flat hierarchy. In contrast, our React Skeleton has 3 folders: assets, components, and styles. I suspect Dan will say that having these folders is unnecessarily confusing.

CRA: You can see this from their template folder here. Brunch: And compare it with the React Skeleton folder here.

Move index.html to the root folder

Currently, our index.html resides in the assets folder because, by default, Brunch treats anything inside an assets folder as a static asset and will simply copy it over to the build folder.

Unfortunately, it seems that the preferred approach with CRA is to have the index.html at the root of the project folder. This is annoying because this means we would have to add to our configuration file to take care of this.

Launch Brunch with a config file elsewhere

I’m not certain if this is possible, but one of the big advantages of CRA is that it abstracts away all config files. When I launch Brunch, however, it always requires a brunch-config.js in the root of the project.

I was wondering if there was a way to run Brunch while pointing to a specific config file instead. This would make the generated app much simpler. And when we need to implement the eject functionality, we can simply move the config file back into the root of the folder.

Perhaps something like this:

> brunch watch --server --config <path-to-config-file>

EDIT: I did some more digging regarding specifying a config file. Unfortunately, it seems to be a deprecated feature. Scroll down for more details.

[paulmillr]

Some updates on the work i’ve done:

1. The skeleton that works already without package.json deps and brunch config: https://github.com/brunch/cra-brunch-test
2. The mediator that made the skeleton possible; alternative to react-scripts: https://github.com/brunch/cra-brunch

[colinbate]

In the CRA world, they don’t have a config folder, the config is all part of the single devDependency that they install. I’m not sure that brunch would even work with that setup given its use of the package.json as a form of of configuration.

@paulmillr Is it possible to specify the brunch plugins without putting them in the package.json? I tried setting them “on” in the config, but that doesn’t work if they aren’t known already.