This project was bootstrapped with Create React App.
To see the original create-react-app readme.md, see createReactApp.md
This application was created as part of a PHYS396 project. 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. 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 are in this file. 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 file Calc.js
The functions to compute the temperature of the surface and the layers are in this file.
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.
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