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!
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
- 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
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
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
npm command not working? Install Node.
Do the same for the React application:
cd ../app npm install
The React application is contained in the
Our application is divided into two major components:
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
. ├── 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
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
Have a look in
. ├── 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
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-routerallow us to set up routing to our React Components. You’ll learn more about both
utils: This directory contains our reusable utility components – such as Keen Analytics events, in the case of our app.
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 (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!
If you are on Linux, find out how to install for your distribution (Ubuntu, Red Hat, etc).
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:
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.
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
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
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
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:
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
source ../env.sh; node index.js
Running Webpack is key to running our application. Follow the steps below!
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
source ../env.sh; webpack --watch --progress
And one last step, open a new terminal window and run
Head over to http://localhost:3000.
Boom! You’re live. You should see the introduction screen:
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
- 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.
Also published on Medium.