This project was bootstrapped with Create React App.
To see the original create-react-app readme.md, see createReactApp.md
This application was originally created as part of a PHYS396 project by A. Courchesne. More functionalities have been added to the application by other contributor following the release of the 2.0 version. It is a single-page appli- cation written in HTML5, javascript and CSS using React.js v16.5.1. This document will include information on the application meant for a developer that would like to improve the application, or just to understand how it work to reuse some parts. The code is available publicly on my github. The application is currently live at www.climateapp.ca
The application is created using create-react-app and uses the default setting for the tools that are provided, i.e. the service worker. The code is separated in react components. Each component have its own javascript and CSS files, which are described below. Reactjs is useful because the components are reloaded only when the state change. The application holds its state in App.js, which passes down functions as props to its components. The child components can down use the function to modify the parent’s state and trigger a reload of the affected components.
This is the main component of the application. It contains the main state informa- tion that is passed down as props to other components. It contains default values to load for the state, functions to modify the state and the top level components. That is, the header, both panel and the footer. The application comes in two versions (Beginner and Advanced). Props for both versions are stored separately and the conditional rendering is controlled by a switch. Specific instructions for rendering the components are found in their own files.
This file is auto-generated by create-react-app, and it only loads the main application with the service worker. This file should mostly not be modified.
All the commands to generate the simulation in the right panel of both versions are in these files. As soon as the global state of the application change, we clear the canvas and re-render the graphics (i.e. this is NOT using the react delta mechanism). This file need to access most of the state variables, which are passed as props. This is also when the calculations are done, using the external files Calc.js and CalcPed.js. The two simulation canvasses visually differ in arrows positioning, temperature display and representation of the atmosphere (blue arcs).
The functions to compute the temperature of the surface and the layers are in these files. Functions in Calc.js have many more variables as compared to those in CalcPed.js and are more complicated. The original system of equations are solved using Python simpy module (available in "calculations" folder)
This file is responsible for rendering the box with a variable number of layers. As such, it contains the logic to determine how many layer parameter box we should render, and if we should show the "+" box. The former allows for a maximum of 3 layers, whereas the latter allows for one single atmosphere.
There are also multiple other files that represent smaller, specific components. They should be self-descriptive, and if it looks that they aren’t doing anything, this is because they are used for styling purposes (i.e. CSS). The sliders used are provided by rc-slider.
Instructions for the tools should be easily available online, but I will provide the way I was using the tools.
The development server can be started with "npm start" in the directory. The development build will be served at localhost:3000 and refreshed on every code change. For the IDE, I recommend using Visual Studio Code.
Building the application is as easy as doing "npm run build" in the directory. This will minify the files and pack everything in the build folder.
An easy way to serve the application is to use the McGill web servers. All CS students have access to a home directory, in which there is a "public_html" directory served by an Apache web server. SCPing the content of "build" to "public_html" should work out of the box.
However, I decided to use my own services for the deployment of the application to have more control, which are described below.
I was able to get a cheap ".ca" domain name, provided by Web Hosting Canada.
The website was first configured with AWS Route53 as the DNS, but I realized WHC were offering this service for free so I switched it over to them. I only had to add a type A address to my server’s IP
I was first hosting the servers myself, but for more availability I decided to move them to AWS. I am currently using the free tier (t2.micro) machine with Ubuntu.
I am currently using NGinx to serve the application. There is also an handy tool that is named "Certbot" that handles the SLL certificates