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!
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 with the help of Babel
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 to upcoming posts in this React & Redux series:
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:
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:
Install the Node modules we need to power the server side API:
The server-side API is contained in the /api directory.
Note: npm command not working? Install Node.
Do the same for the React application:
The React application is contained in the app directory.
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:
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:
│ └── www
│ ├── App.js
│ ├── actions
│ ├── components
│ ├── main.js
│ ├── reducers
│ ├── routes
│ ├── style.css
│ └── utils
│ ├── css
│ ├── favicon.ico
│ ├── img
│ └── js
│ └── index.js
│ ├── error.ejs
│ └── index.ejs
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.
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:
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”.
Copy your App ID, Key, and Secret. These will be added to your config file.
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:
Add MySQL Credentials to env.sh:
Tip: If you are on a default Homebrew install, your username is root and password is root.
Add Stream Credentials:
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 /app directory:
Run the index.js file:
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 app:
source ../env.sh; webpack --watch --progress
And one last step, open a new terminal window and run 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!
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.
Stay updated to upcoming posts in this React & Redux series:
Originally published at The Stream Blog.