Getting Started

Pre-Requisites

This is a project of the Hack for LA non-profit. To join this project as a developer, you must first complete the first four steps of Hack for LA Onboarding.

We can really only accept developers who have at least junior-level experience with React JS, as we do not have the resources to teach React to new developers.

Then review the "self test" in this slide deck: Developer Self Test. If you have performed all the tasks itemized on the first slide, then you should be qualified to join us as a Front-End developer. If you also have knowledge of the topics on the second slide (except CRON job scheduling), then you are qualified for a Full-Stack position on Food Oasis.

Check the Available Position Board or contact us on the tdm-calculator Slack channel to see if we are currently in need of volunteers in the appropriate roles.

Familiarize Yourself with the Food Oasis Application

If you are not going to do hands-on development, you can simply experiment with the test version of the application at https://devla.foodoasis.net.

The production version is deployed to https://la.foodoasis.net.

If you wish to study or contribute to the code base, follow these Installation Instructions to install a development environment on your machine:

Installation Instructions

Prerequisites

Git for working with Github source code
Node and npm for running the web app

Special Instructions for Windows Users

Most Windows users install Git by installing Git for Windows. This will also install Git Bash, a partial implementation of the bash shell that runs on Windows. There are other options, including:

WSL2
Powershell
Windows Command Shell

However, all of the instructions in this wiki assume you are using Git Bash for a terminal on Windows.

Please use the LTS version of node.

The bash shell "inherits" environment variables from Windows, and you may find that you need to add %AppData%/npm to your PATH environment variable and re-start any bash shell instances for certain bash commands to be found.

Since Windows uses CRLF for line endings, while all the other common operating systems (including GitHub) use LF for line endings, the project has a .gitattributes file which forces source code files to use LF for line endings. This is required for Prettier and Eslint to work properly on Windows machines as desribed in this article. Normally, you shouldn't need to do anything to set this up, but it's good to know, in case you experience problems with line endings.

Special Instructions for IOS Users

(TBR) Mac users often need to precede terminal commands with sudo. This is typically not mentioned in the wiki instructions, as Mac developers typically know when it's needed, and it's not needed on other operating systems.

Special Instructions for VSCode users

(TBR)Install the Prettier VSCode extension esbenp.prettier-vscode

Full-Stack React/Node Application Installation

The simplest way to get started is to run the application on your machine natively, and use our shared development database in the cloud. This is appropriate if you are just studying code or only working on node/express or front-end code. If you need to make changes to the database schema or reference data in the database, you will need to set up an environment that includes a local copy of the development database to develop the database changes.

Start a terminal app, such as a Git bash shell on Windows or Terminal on Mac OS
Create a source directory (e.g. hackforla) in the user's home directory and go in it (or use the folder where you normally put local git repositories)
```
mkdir hackforla
cd hackforla
```

Clone the Food Oasis repository

git clone https://github.com/hackforla/food-oasis

Change to the food-oasis directory:
```
cd food-oasis
```
Install the project root npm depedencies:
```
npm install
```
Change to the /server subdirectory:
```
cd server
```
Install the server npm dependencies:
```
npm install
```
Obtain the dotenv file from the Food-Oasis/Developers G-Drive folder and place it in the /server directory. Re-name this file to .env on your machine. It contains private info (i.e., the production database connection string) that we cannot put in the public GitHub repo.
Change to the client directory:
```
cd ../client
```
Install the client (React) dependencies:
```
npm install --legacy-peer-deps
```
(The --legacy-peer-deps option allows version 18 of React to be used with dependencies that have not explicitly had their peer dependencies set to include newer versions of React.)

To Run the React/Node Application

In one terminal window, navigate back to the /food-oasis/server directory and start the node server:
```
cd ..
npm start
```
In a separate terminal window, navigate to the /food-oasis/client directory, start the react app, and open the browser :
```
cd client
npm start
```

Note: Node server (backend) should start before the React server (frontend/client)