Part One — Setting up the Project

First up, make sure you have Node and NPM installed.

In your terminal, type the following to make sure you have a recent version of Node installed:

$ node -v

As long as you have 6+ installed that should work. If not, go to https://nodejs.org/en/ and download the current LTS version (at the time of this writing that is 6.11.12).

Once that is installed, rerun the node –v command to make sure it installed properly (if so you will get a response in the termnal with your node version, i.e. “v6.10.3” or “v6.11.12” etc.

Aditionally, we want to install gulp, webpack, and turbo-cli globally:

$ sudo npm i –g gulp $ sudo npm i –g turbo-cli $ sudo npm i –g webpack

After these are installed, run the following command to make sure Turbo has installed successfully:

$ turbo version

~0.7.87 is version at the time of this writing, if you followed these steps properly yours will be the same or newer. If older, rerun “npm i –g turbo-cli” and then check again.

In order to get up and running as quickly as possible, we are going to use the “turbo new” command to scaffold a new application. This creates a new React application on our local machine with some preset Webpack and Gulp configurations as well as additional libraries that will allow us to deploy to the Turbo platform later on.

$ turbo new newsfeed –-react

When complete, we want to enter the directory and run “npm install”.

$ cd newsfeed $ npm install

To make sure everything is running properly, run the “turbo devserver” command:

$ turbo devserver

and then navigate to localhost:3000 in your browser, you should see something like below:

If not, try rerunning the setup steps and check your terminal for any error messages as you go.

Next, we want to install a theme.

Run the “turbo themes” command to see a list of themes currently available.

$ turbo themes

Quick shout out to AJ over at https://html5up.net/ who most of these themes are based off. For this tutorial, we are using the editorial theme, so run the following:

$ turbo theme editorial

At this point it would be good to open up a terminal tab and run webpack with the -w flag, which we can leave running in the background:

$ webpack -w

Re-run “turbo devserver” command if it is no longer running (I typically just leave this running in a terminal tab), and then reload your browser and you should see the new theme like below:

All the contents of the actual React application live in the src directory.

If we go to src/index.js, you will see the root of our React application.

Currently, if you look at line 3, we import one other React component, called Elements, and render it on Line 13, which is the component you see when you go localhost:3000 in your browser.

This is just an example component which shows us some components that come with our theme, so we are going to remove this and add our own content.

First, we will create a pages directory with an index file and a home page (I am running these from the project root directory, i.e. ~/Desktop/newsfeed/ ):

$ cd src $ mkdir pages $ cd pages $ touch index.js $ touch Home.js

First, make sure to import your Home component to your index.js:

For our Home component, we will copy some of the scaffolding from the previous Element component, and strip out what is not needed to give us a good base in terms of styling to build our application, i.e. the sidebar and then main area for content, leaving us with the following:

(If you want a step-by-step and more insight on how to iterate through this process of working with themes, I advise watching the video for this section and start at around 14 minutes.)

In order to actually see these changes take effect, we need to go back to the index.js file under the ‘src’ directory, and render the Home Component instead of the previous Elements Component.

Additionally, you will notice some new imports on lines 4 and 5. These are for Redux, and you will notice on lines 10–12 that instead of just an empty div, we are now wrapping our main Application Component (which right now is the Home component) in a Provider Component.

Again, we are not going to get too bogged down in theory, but just know that the Provider wraps your main component and basically allows our application to access and alter data in a centralized store via Redux later on.

Although we have our base layout setup, we want to make one more change to the Sidebar component. We do not want to rely on the theme’s sidebar, because we want to make some additional changes to the sidebar and do not want to alter the theme folder directly. Again, from your project root run the following:

$ cd components $ mkdir presentation $ cd presentation $ touch index.js $ touch Sidebar.js

Our index should look as follows:

Now, we need to go to our theme/Sidebar component, and copy and paste all the contents into our new presentation/Sidebar.js component as follows:

Before we can even see any of our changes take effect, we need to fix our import on our Home.js file (line 2 below) which imports our new component instead of the previous one included with our theme:

Now, coming back to our Sidebar.js, don’t worry about fixing the imports at the top in lines 2 -5 because we want to remove all references to other components and render just regular HTML. For example, in lines 12 and 13 we reference the Search and Nav components respectively.

Instead of importing those components from the theme and then rendering the component, let’s follow the same exact process we just did for Sidebar, and just paste the actual contents from the theme component into our Sidebar component.

For example, <Search /> on line 12 in the previous Gist gets replaced as follows:

Lines 12–16 replaced the previous Search Component, and we copy and pasted these straight from the original theme component. Basically, we are trying to remove all extra dependencies and complexities that are not needed.

We will strip out the rest of what we do not need, and are finally left with the following:

Next, we need to register our app with the Turbo platform, which will allow us to quickly deploy our app (free), and in turn allow us to make live network requests.