Setting up create-react-app + express.js + mongo DB + react-bootstrap (feat. ES6!)

In this article we will setup React application backed with express.js(Node framework) and Mongo DB.

Please note that this is not about server-side rendering or Redux.

 

For demo purpose we will create a sample todo app. The main goal is to demonstrate how to combine frontend + backend for building an app. First of all let’s have a look on technologies we are using –

Front end –

We are using  React Js. So will use official create-react-app boilerplate by Facebook.

To make out application responsive we will use React-bootstrap the most popular front-end framework, rebuilt for React.

Will use Webpack for module bundling.

Additional Modules/Libraries –
  • react-intl – For i18n of app
  • react-router-dom – Declarative Routing for React.js
  • axios – Promise based HTTP client for the browser and node.js

Back end –

Express – Node.js web application framework

Database –

Mongo DB – Building on the Best of Relational with the Innovations of NoSQL.

Additional Modules/Libraries –
  1. mongoose – The elegant mongodb object modeling for node.js

Tooling

Yarn  is a fast and reliable dependency manager. If you guys fine with npm keep going!

That’s it. Lets move to installation part.

Getting Started –

I assume you already have Node.js and yarn/npm installed. So we begin with the cli:

First we will install create React app

$ npm install -g create-react-app

And let’s create an app named client  later will move this app inside Express app :

$ create-react-app client
$ cd client

To start or application at http://localhost:3000/ we run:

$ npm start / yarn start

Now we are able  to run our react application.  Inside that directory, it will generate the initial project structure and install the transitive dependencies:

Considering that the project eventually will grow. Let’s make some changes to the directory structure. After making chanes in app, it will look like –

/client

  • /locale
    • en.js
  • /public
    • index.html
    • favicon.ico
  • /node_modules
  • /src
    • /components
    • App.css
    • App.js
    • App.test.js
    • index.css
    • index.js
  • routes.js
  • package.json
  • webpack.config.js
  • .gitignore
  • logo.svg

If you noticed above directory structure then you will realise that we added following new directories  and files –

  1. /components – In future all components will be goes here
  2. /locale – For i18n
  3. routes.js – Application routes will be defined here
  4. webpack.config.js – Webpack configuration file

Now start by creating an About component that will be shown at /about

$ mkdir src/components/About
$ touch src/components/About/index.js
$ touch src/components/About/style.css

Will also create an Home component that will be shown at /

Router setup

React Router DOM is published to npm so you can install it with either npm or yarn. Create React App uses yarn, so that’s what we’ll use.

yarn add react-router-dom
# or, if you're not using yarn
npm install react-router-dom

Lets read getting started about react router  so that you will be more clear on how routing works.

Router used in our App –

  1.  /
  2. /about

On route change will load respective component.

/src/App.js

/app

  • /bin
    • www [Unix exicutable]
  • /models
  • /public
    • /images
    • /javascripts
    • /stylesheets
      • style.css
  • /routes
    • index.js
  • /views
    • layout.jade
    • index.jade
    • error.jade
  • package.json
  • app.js

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s