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
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.
priv/static/index.html and add the following content;
<html> <head> </head> <body> <div id="react-root" /> http://js/main.jsin our
We will use Browserify to package up all the JSX and JS files and concatenate them into the
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
http://localhost:5000/index.htmlin 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.