Project Structure and Organization

Frontend

This project structure was generated by default using Razzle which is used to create server-rendered universal ReactJS applications with no configuration. It has been altered according to our beliefs, which are garnered towards the developers of today.

General Folder Structure

• plugins - Razzle Plugins used for configuring less and antd design
• public - Contains all the assets for the application
• src - Contains Source Code for the app
• razzle.config.js - Contains Configuration for Razzle to configure its plugins
• generate-production-package-json.js - Used to generate package.json during the build
• commit.sh - A simple bash script which commits the code to master branch. Edit it to change the branch.
• package.json - Dependencies

Note - All the code components or folders that can be reused across any application (apart from this one) have a package.json included. This has all the packages that the folder is dependent on.

src Folder Structure

• browser - contains polyfill for server side rendering for creating window, document objects during SSR.
• client - contains client side ReactJS Code.
• config - Default Configuration of project which is injected into client side at run time.
• client.js,server.js and index.js are used to handle configuration and Server Side Rendering of the routes.

client Folder Structure

Contains all the application code organized into different folders such as components, containers, redux etc

• components - Contains all the Reusable React Native components that are specific to this application.
• config - Configuration for the whole application e.g translations,colors etc.
• containers - Contains all the redux integrated containers.
• fonts - contains fonts used in the app
• helpers - contains data helpers used across containers and components.
• redux - Contains all the actions, reducers and the Redux configuration.
• styles - Common Styles for the application.
• utils - Contains the common utility code used across the app.
• routes.jsx - Contains all the routing architecture across the application.
• app.jsx - Entry point of the client side application
• crud-entity-config.js - Configuration based Admin Screen Generation.

 

Backend

General Folder Structure

This is a es6 based express js project.

 

• src/api - API Handlers for all routes
• src/config - Configuration for the whole application.
• src/helpers - contains helpers used across the application. They are created when the application starts
• src/middlewares - Express JS Middlewares
• src/utils - Utilities for common tasks in the application
• src/index.js - Entry point of the application
• generate-production-package-json.js - Used to generate package.json during the build
• commit.sh - A simple bash script which commits the code to master branch. Edit it to change the branch.
• package.json - Dependencies

api Folder structure

generic.js and service.js are used to read the api definition files under definitions folder and generate routes based on the configuration in each file.