React website for crowd image collection of natural disaster images.
This repo contains the react side code for creating a page to upload images.
- Clone the repository
- Make sure you have node and npm installed
- Navigate to reactapp
- Install all the required node libraries using
npm install --save
- Run the reactapp
npm start
- To run the doc's server run
npx styleguidist server
from the project directory ornpx styleguidist build
to build the html version. We are using react-styleguidedist library.
We use Google App Engine to deploy this app. Before proceeding, please reach out to a member of the core development team and ask them for the app.yaml
file as well as the .env
file. Take the app.yaml
file at put it at reactapp/app.yaml
. Take the .env
file and put it at reactapp/.env
.
Also, make sure you have installed the gcloud
command-line tool. Finally, please ensure that you have the appropriate Google Cloud permissions to deploy the application.
Once you have the app.yaml
and .env
files in-place and the gcloud
tool is installed, run the following commands from the reactapp
directory:
npm install --save
npm run-script build
gcloud config set project climatepixweb-244121
gcloud app deploy
Verify the details and following the interactive instructions when running gcloud app deploy
. Once the deploy is done, the app should be available at https://climatepix.mila.quebec.
Whenever you create a PR to this repository, a version of your PR will be deployed via Netlify Deploy Previews. For example, if your PR number is 20, the code in your PR will be deployed to https://deploy-preview-20--climatepix.netlify.com/.
The build status will be posted on your PR. When the PR integration says that the site has been built, click the "Details" link next to "Deploy preview ready!" to be taken to the deployed PR automatically.
For testing purposes, we should better avoid uploading pictures in the same place as final users. To do that,
you can add the React environment variable REACT_APP_DEV=1
to your .env
file.
If REACT_APP_DEV
is set and contains a value evaluated to true
,
then your pictures will be uploaded in a folder called dev
on Firebase.
Otherwise, if REACT_APP_DEV
is not set or is evaluate to false
,
then the app will be in production mode,
and pictures will be uploaded in a folder called public
on Firebase.