This repo features DW Challenge of creating an ISOMORPHIC application using Node.Js, React.Js and Redux. It has been the goal of every web developer to make their users feel the least possible latency during their visit to the website. In this process of acquiring blazing fast application, we have arrived at the concept of server side rendering.
Here in this repository, the idea is to generate html on the server side and push it to client as html so that users sees possibly no latency during the rendering. In this approach, the performance on server side is also very important. As soon as we receive a request, if there are any dependencies on the API server for data, we process all of that and then perform a server side render, push the data to client browser. There by reducing multiple renders on server side.
INSTRUCTIONS FOR SETUP & LAUNCHING APPLICATION:
★ Download and extract or checkout the repository
★ Use npm install to download all the dependencies
★ Once, installed use the command npm start to launch the application
★ By default, application launches at port 3000
★ To access the application, open your favourite browser and navigate to http://localhost:3000
★ Application should be up and running
Note: If not please, restart the server (Re issue the command npm start)
TOOLS USED:
★ Axios - Thin HTTP Client - used to make http requests to get the product data from PIM
★ Babel - ES2015 transpiling, JSX to vanilla javascript conversion
★ Express - WebApplication framework to listen to requests and send the response
★ NPM RUN ALL - Used to execute more than one command to trigger webpack and start the server in application
★ React - Used to build front end for server side rendering
★ Redux - Used for state management in the application
★ Redux Thunk - Used to handle the asynchronous calls in the application
★ Serialize Javascript - To mitigate XSS attacks on server
★ Webpack - webpack both on client and server a module bundler used to create bundles by making use of dependency graph
★ React Helmet - To add Search Engine Optimization tags to the React Components
★ React-router-config - To handle routing in isomorphic application
PROJECT STRUCTURE:
★ Server bundle.js is available under build folder
★ Client bundle.js is available under public folder
★ The client folder under src directory contains
- Actions - All the react action creators used in the challenge.
- index.js - Actions to get the product data are defined here
- components - All the react components used in the challenge.
- Header.js - Header Component
- ProductDetails.js - To display the product information page
- Products.js - To display the homepage
- NotFound.js - To display 404 error pages
- reducers - All the react reducers used in the challenge.
- index.js - combined reducer
- products.js - Pure function related to the product updates
- client.js - Handles the client side bundle
- routes.js - Handles the routing in DW Challenge
- createStore.js - Used for creating the store required for react application
- renderer.js - Used for converting the rendered application to plain html to be sent to the browser
★ index.js - Express Server that listens for requests at port 3000
★ package-lock.json - Dependency locking for the application
★ package.json - List of dependencies and scripts used for the challenge
★ webpack.base.js - Common webpack configuration for both client and server
★ webpack.client.js - Client specific webpack configuration
★ webpack.server.js - Server specific webpack configuration