Phoenix v1.1.2 and React.js

Image for post
Image for post
Kind of like chocolate and peanut butter!


Current Versions

React: v0.14.6

ReactDOM: v0.14.6

NPM: 3.6.0 (Very important, this process will not work with NPM 2.x; you need to use 3.x)

NodeJS: v5.6.0

Brunch: v2.1.x, v2.2.x, v2.3.2+(v2.3.0 breaks with error messages about NODE_ENV being undefined, so make sure you’re using one of the versions I listed!), v2.4.x

Creating Our Project

$ mix local.hex$ mix archive.install

If you’ve installed Phoenix before, it will ask you if you want to override any existing packages. Just say yes here. Next, we’ll create a new Phoenix application:

$ mix reactpx

Go ahead and answer yes to fetching/installing dependencies. We’ll be needing them this time! Now, move into that directory and we’ll move on to installing our NPM dependencies.

$ cd reactpx

Installing Our NPM Dependencies and Configuration

$ npm install --save react react-dom babel-preset-react

After this is complete, we’ll need to modify our brunch-config.js file in the root directory of our Phoenix application to support the new modules we installed. First, look for the section regarding “plugins”, and then the sub-object for “babel”. Here we’re going to add an array of presets that we want babel to use:

plugins: {
babel: {
presets: ["es2015", "react"],
// Do not use ES6 compiler in vendor code
ignore: [/web\/static\/vendor/]

We also need to whitelist the installed npm modules under the npm configuration section so that brunch knows we’re going to use “react” and “react-dom”:

npm: {
enabled: true,
// Whitelist the npm deps to be pulled in as front-end assets.
// All other deps in package.json will be excluded from the bundle.
whitelist: ["phoenix", "phoenix_html", "react", "react-dom"]

Save this file, and run brunch’s build command just so that we’re sure everything is golden (technically, the first time you start up the Phoenix server this will happen anyways, but if you already started your server up this won’t happen unless you modify something, which we’ll do later):

$ brunch build

Important Note About NPM Versions

Writing An Example Component

<div id="hello-world"></div>

Finally, you’ll want to add the following snippet of code to the bottom of your web/static/js/app.js file:

import React from "react"
import ReactDOM from "react-dom"

class HelloWorld extends React.Component {
render() {
return (<h1>Hello World!</h1>)


It Works!

$ iex -S mix phoenix.server

And on the main page, you should see something like the following:

Image for post
Image for post
Our React.js component loaded into our main app (also showcasing the React Chrome extension)

Congratulations! You now have a working React.js component inside of a Phoenix application with no requirement of swapping out Brunch for Webpack or any other extra work! Enjoy! If you want to just check out the repo for this as a starting point, you can find it at:

I am a software engineer, and now, published author! Check out my new book at

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store