This post follows on from Building a web application with Phoenix & React.js – Part 1 in which we covered setting up a Phoenix-powered JSON API

In this post, we will setup a separate folder to manage our frontend application. This will be a single-page application, powered by React.js, which will consume our API.

For this example, I’m going to use Browserify to create a standalone sub-project.

Configure Phoenix to serve our single-page application

The output of our build system will be a single javascript file, main.js, which we can serve from our Phoenix application by copying it to the directory priv/static/ We will also need an HTML file, into which we will render our React application.

Edit priv/static/index.html and add the following content;

<html>
  <head>
  </head>
  <body>
    <div id="react-root" />
    http://js/main.js in our index.html file.

We will use Browserify to package up all the JSX and JS files and concatenate them into the main.js file.

If you don’t already have it, install browserify like this;

npm install -g browserify

Now use it to build our application and install it into our Phoenix application;

browserify -t babelify js/index.jsx > ../priv/static/js/main.js

Now visit http://localhost:5000/index.html in your browser, and you should see “Hello, World!”

So, now we have our Phoenix application rendering a React.js component we created.

In the next post, we’ll create a simple build system, and connect our React application to the API.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s