Project Overview

The project is organized into a couple different main sections.

Server

The server directory is where everything relating to the frontend server is located.

In it you will find:

• server.js: the main file that you run to start the server. This file brings all the other parts of the server together. It uses Express.js to start a server. Brings in the routes, connects the views, and executes various server middleware which are different functions that get run every time a request is made to the server (i.e. parsing the user session to determine what user is logged in and what their language preference is, getting all the string translations for the current page, and setting up convenience functions for the API).
• routes: where all the server endpoints are defined. routes.js contains a list of all the route endpoints that are in the app, route-configs contains a file for each route with all the configuration information for a route (who has access, the route default title, endpoint, and logo name using font awesome), and route-handlers contains a file for each route which contains the handler functions for each route (get, post, put, delete etc.).
• server-middleware: contains various files which contain functions that get executed every time a user makes a request to the server. This includes things like session and translation management and api and template convenience methods.
• utils: contains various miscellaneous files. Right now this only includes a constants file which contains a bunch of constants set in fallback settings or environment variables.
• views: contains the main view templates for each page in the app. These views use handlebars and can be rendered from any route using res.render(route_name_without_filetype). The layouts directory contain the base templates for pages. Right now it just contains a logged out and logged in base views. When you render a view it will automatically use the logged in or logged out view layout template as it's base template depending on the route's configuration.

React

The react directory contains directories for each page that uses is rendered using React.js. Right now the only pages that are rendered using React are create course, create assignment, and translation manager. The main.js file combines all the pages into one so that only one JavaScript file is generated for all 3 pages. The shared directory contains React modules that can be shared across all the different React views (create course, create assignment, and translation manager).

Styles

The styles directory contains all the styles for the app. main.scss is the main file that contains all imports all the component, page and vendor style files. It also includes some general website styles. The components directory contains the styles for individual components that are used throughout the app (things like inputs, sections etc.). The pages directory contains a file for each page in the app. If there are styles specific to the page put them in this file. The vendor directory contains the styles for any third-party elements. The _meyer_reset.scss file is the reset . The _variables.scss

Static

The static directory contains the static assets for site that are not generated. This includes:

• fonts includes all the assets for the fonts used
• images includes all the static images used in the app
• vendor includes any third-party assets like font awesome
• favicon.ico is the favicon for the app
• shared.js contains the JavaScript which creates the custom inputs like the switch and checkbox

.build

The whole app is compiled into the .build directory. Everything is run from the .build folder (including the server.js). The building process is all taken care of by the gulpfile.js once you start npm start.