Skip to content

Getting Started

John Darragh edited this page Feb 5, 2021 · 5 revisions

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

  1. Git for working with Github source code
  2. 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.

  1. Start a terminal app, such as a Git bash shell on Windows or Terminal on Mac OS

  2. 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
    
  3. Clone the Food Oasis repository

    git clone https://github.com/hackforla/food-oasis
    
  4. Change to the food-oasis directory:

    cd food-oasis
    
  5. Install the project root npm depedencies:

    npm install
    
  6. Change to the /server subdirectory:

    cd server
    
  7. Install the server npm dependencies:

    npm install
    
  8. 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.

  9. Change to the client directory:

    cd ../client
    
  10. Install the client (React) dependencies:

    npm install
    

To Run the React/Node Application

  1. In one terminal window, navigate back to the /food-oasis/server directory and start the node server:

    cd ..
    npm start
    
  2. 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)

Alternative Environments

See Development Environments for further information about more advanced development environments.


Next: Contributing Code

Clone this wiki locally