Skip to content

Developer Documentation

Jump to bottom
Sarkany Adrian edited this page Jan 26, 2017 · 2 revisions

##################################### ######## Project Overview ########

  • This project is build as an isomorphic application and is meant to implement Front-End views and functionality on top of an API, using the following: NodeJS, ReactJS, Express, Redux, SocketIO, ES6, Babel.
  • As a starting point, we used the react kriasoft boilerplate. For more information regarding the boilerplate, please visit: https://github.com/kriasoft/react-static-boilerplate

################################ ######## Project Setup ########

  1. Make sure you are using:

    • node v6.9.2: curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.32.0/install.sh | bash nvm install 6.9.2
    • npm 4.0.5: cd ~/.nvm/versions/node/v6.9.2/lib npm install npm@4.0.5

  2. Clone the project from: git@github.com:CleverSoftwareSolutions/eComm-FE.git

  3. Install node modules npm install

################################ ######## Linter Setup ########

  1. Install the following packages (valid configuration for usage with SublimeText)

    • SublimeLinter_
    • SublimeLinter-contrib-eslint
    • ESLint

  2. Set the "node_modules_path" in ESLint Settings

  3. Reenable your SublimeLinter (Disable Linter -> Enable Linter)

##################################### ######## Running the project ########

  1. The project can be run locally using: npm start

##################################### ######## Structure Overview ########

Let's take a quick look at the folder structure:

  • build - contains the compiled project, used to deploy the app
  • docs - contains general docs and information
  • node_modules - contains all used node modules
  • public - contains public files such as favicon, browserconfig for IE, etc
  • src - root application folder ( we will dive deeper into it in the Application Overview section below )
  • test - contains application tests
  • tools - contains configuration files for the node server, webpack, build handling, etc
  • other helpfull files such as Readme, git configs, package.json, etc

##################################### ######## Apllication Overview ########

In this section we will take a look at the way the application is built, what is it trying to achieve and, more importantly, how. For this purpose we will focus on files that live in the "src" folder of the app.

* Keep in mind that this is an isomorphic application. That means we are using server-side rendering with NodeJS for each "page" of our project. After it is rendered by the server, each "page" becomes a ReactJS application.

But first, let's take a look at all folders/files found in the "src" folder:

  • actions - contains all Redux available action methods
  • api - contains all Express routes that comunicate with the API
  • components - contains all ReactJS components (each with it's on css and package.json file)
  • constants - contains app constants
  • core - contains fetch (server/client), browser history configuration
  • fonts
  • pages - contains page components, two wrappers for each of the components (we will discuss those in the Implementation Overview below), general css file for the respective page, package.json file
  • reducers - contains all Redux available reducers
  • routes - server side routes/client side routes
  • utils - dev utils
  • additional files like the Redux Store, server configuration, client entry point, config file

######################################### ######## Implementation Overview ########

As mentioned earlier, this is an isomorphic application. In our context, this means that we are rendering the our application pages two times (you can find those by taking a look into each page folder):

  • NodeJS backend rendering:
    • (you can see this in the routes folder by taking a look at the "server.js" file):
    • example:
siteRoutes.get('/biography', (req, resp, next) => {
        const params = {
        title: 'Biography',
        description: '',
        header: 'default',
        active: '/biography',
        content: <BiographyWrapper />,
   };
   handleRoutes(req, resp, next, params);
 });

  • This will render the "pageWrapperServer.js" file that will have all the backend data that page needs to function, bound to the component as React props. This "....WrapperServer.js" component will, in turn, render our client side components.

    • As each page render by the server has a frontend equivalent, keep in mind that all props coming from the server, will need to be valid react props in the frontend component aswell.

    This brings us to our next step:

  • Rendering with React: As mentioned above, each page coming NodeJS backend, has an equivalent component for ReactJS frontend. This will contain all data props coming from the server, as well as additional props used only on frontend (eg: store actions) Following the React pattern, each page renders it's necessary components, coming from the components folder and handles data using Redux.

Clone this wiki locally