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:

1. Introduction
2. React
3. Redux
4. Stream
5. Imgix
6. Keen
7. Algolia
8. Mapbox
9. Best Practices and Gotchas

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 both react-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.

Stay updated on upcoming posts in this React & Redux series: