Cabin – React & Redux Example App – Introduction
This is the 1st post for Cabin, the React & Redux Example App Tutorial series created by Stream. The final result of following this series is your own feature-rich, scalable social network app built with React and Redux! Visit getstream.io/cabin for an overview of all the tutorials, as well as a live demo. The source code can be found on the Stream GitHub repository for Cabin, and all blog posts can be found at their respective links below:
Introduction
Ever wanted to build a photo sharing social network exclusively for cabins? Made with React and Redux? Yes, of course? Well, you have come to the right place.

Cabin, the React & Redux Example App and Tutorial Series is perfect for those:
- New to React and/or Redux
- Who want to see the structure of a full stack JavaScript application
- Want to see ES2015/ES6/ES7 code in action
- Looking for scalability, power, and ease-of-use with services like imgix, Algolia, Mapbox, Keen, and Stream
- Really like cabins, and want to create an app dedicated to awesome photos of them
Stay updated on upcoming posts in this React & Redux series:
Overview
This introduction is intended to start you off easy - and we will be focusing on getting you setup with the Cabin project files, and teach you the very basics of your workflow. Here is what you will be learning in this post of the series:
- Getting Started
- Application Structure
- Running the Application
- Webpack Overview & Basics
Getting Started
Let's get this show on the road, shall we? First things first:

Clone the GitHub repository for Cabin:
git clone https://github.com/GetStream/stream-react-example

Install the Node modules we need to power the server side API:
cd stream-react-example/api
npm install
The server-side API is contained in the /api
directory. Note: npm
command not working? Install Node.

Do the same for the React application:
cd ../app
npm install
The React application is contained in the app
directory.
Application Structure
Getting a look at how a full-stack JavaScript application is structured is useful for any developer. Let's go over the application structure of our example app a bit. Our application is divided into two major components: app
and api
. app
is where our React application lives, and api
is where our Node application lives.
Server Side - API
We won't go into depth about our Node architecture too much - but here's a breakdown of our application structure. Study the structure of api
:
.
├── config.js
├── index.js
├── node_modules
├── package.json
└── routes
├── comments.js
├── contributions.js
├── explore.js
├── followers.js
├── index.js
├── likes.js
├── locations.js
├── notifications.js
├── searches.js
├── stats.js
├── trending.js
├── uploads.js
└── users.js
Open index.js
to see most of the setup work for our API. routes
contains our URL routes that we're creating with restify. Inside our routes, we're making queries to a MySQL database via node-mysql.
Client Side - React Application
All the excitement that is our React and Redux application is living in the app
directory. Have a look in app
:
.
├── LICENSE
├── app.js
├── bin
│ └── www
├── config.js
├── modules
│ ├── App.js
│ ├── actions
│ ├── components
│ ├── main.js
│ ├── reducers
│ ├── routes
│ ├── style.css
│ └── utils
├── package.json
├── public
│ ├── css
│ ├── favicon.ico
│ ├── img
│ └── js
├── routes
│ └── index.js
├── views
│ ├── error.ejs
│ └── index.ejs
└── webpack.config.js
The heart of our application here is in modules
. Here is where our React and Redux application lives. Look at the breakdown of app
:
actions
: The location of Redux Actions. "Actions are payloads of information that send data from your application to your store." You will learn all about Actions in the Redux post of the series.components
: At the core of React are Components. They are located in this directory.reducers
: Redux Reducers. Reducers specify how the application’s state changes in response to our Actions.routes
: React Routes (react-router
allow us to set up routing to our React Components. You'll learn more about bothreact-router
and Routes.utils
: This directory contains our reusable utility components - such as Keen Analytics events, in the case of our app.
Additional Setup
There are several more components to set up before we can run our app. Let's start with our database.

We're using MySQL for a database. Let's install that if you have not already.
Install MySQL
Install MySQL (if necessary): Mac OS X If you are on OS X, and do not already have MySQL:
brew install mysql
Tip: If you do not have Homebrew (brew
) - you should go get that! Linux If you are on Linux, find out how to install for your distribution (Ubuntu, Red Hat, etc).
Run MySQL
Post-install, let's make sure that MySQL is running - run one of the options below:
To have launchd start mysql now and restart at login:
brew services start mysql
Or, if you don't want/need a background service you can just run:
mysql.server start
Importing Cabin Database
The database dump is located at db/cabin.sql. Please ensure you are in the db directory:
cd ../db
Login to MySQL:
mysql -uroot -proot
Note: The above example is for the default MySQL configuration with Homebrew. If you are on Linux, another platform, or changed your default credentials, you need to perform import action with the credentials that were set up. Check out this Stack Overflow post for more information. Now, in your MySQL command line - create a database named "cabin", switch to "cabin", and import the cabin SQL data:
CREATE DATABASE cabin; USE cabin; SOURCE cabin.sql;
And you should be set. If you are still in the MySQL command line, you can run SHOW TABLES;
to take a look at the tables that you have imported:
+-----------------+
| Tables_in_cabin |
+-----------------+
| comments |
| followers |
| likes |
| searches |
| uploads |
| users |
+-----------------+
6 rows in set (0.00 sec)

Stream is powering your Cabin newsfeed, notifications, and more.
Signup for Stream
Sign up for a Stream account (if you haven't already): If you have a Stream account already, skip this step and move on to the Stream Dashboard.
Create App in Dashboard
Next, in the Dashboard, click "Create App" at the top right. Name the app "cabin_[your_name_here]".

Copy your App ID, Key, and Secret. These will be added to the env.sh
.
Adding Credentials
In order to get your application up and running, we'll need to modify and source the env.sh
file that is located in the main directory of the repo. To do so, simply open the file and find the environment variables that you need to modify. Please ensure you are in the root directory of stream-react-example:
cd ../
vi env.sh
Add MySQL Credentials to env.sh
:
MySQL
export DB_USERNAME=VALUE
export DB_HOST=localhost
export DB_PASSWORD=VALUE
Tip: If you are on a default Homebrew install, your username is root
and password is root
. Add Stream Credentials:
export STREAM_APP_ID=VALUE
export STREAM_KEY=VALUE
export STREAM_SECRET=VALUE
After modifying, save the file and run the following command:
source ./env.sh
Okay, let's move on - to starting up our application! Let's start with the API:
Start the API
Let's start it up. Ensure you are in the /api
directory:
cd ../api
Run the index.js
file:
source ../env.sh; node index.js
Webpack
Running Webpack is key to running our application. Follow the steps below!
Install Webpack
Install Webpack, Globally
npm install -g webpack
Run Webpack & Check Out Your App
Before you even understand Webpack, let's just run the darn thing. Ensure you are in the app
:
cd ../app
Run Webpack:
source ../env.sh; webpack --watch --progress
And one last step, open a new terminal window and run npm start
:
npm start
Head over to http://localhost:3000. Boom! You're live. You should see the introduction screen:

Unfortunately, we can't play around with your new app yet. So, let's stop here - and go over Webpack a bit. Note: If you really want to play around - head over to the demo application!
Webpack Overview
As you can see - we have dozens of JavaScript files in modules. While this is modularity is great for us as developers, it's not great for a final product to be used by the web browser. Not only that, we also have JSX (more on this soon) in our components, which will not fly in the browser. Also, our ES6/ES2015 code won't either. We will need to call upon Babel before the code hits the browser. The solution to all these things is Webpack, a "module bundler" that will take our dependency-laden modules and generate static assets:

Check out what operations we are instructing Webpack to do in app/webpack.config.js
:
- Converting ES6/ES2015 to ES5 (via Babel)
- Converting JSX to JS (via Babel)
- Bundling JS files
- "Uglifying" (Minifying) JS
- Converting Sass to CSS (if necessary)
- Minifying CSS
3x Extra Credit: Check out Tyler McGuinness's React.js Fundamentals program. He covers the basics of Webpack, and a whole ton more. Highly recommended.
Conclusion
As you can see - there's a lot of cool stuff that goes into a full-fledged photo sharing application built with JavaScript. We got set up - and took a look at how our application is structured. At the heart of our application is React and Redux - let's learn more about them in the next posts of this series. Let's start with all things React.