Implement Docker for Development

.dockerignore

@@ -0,0 +1 @@
+node_modules

Dockerfile

@@ -0,0 +1,33 @@
+FROM python:3.9
+
+# Add the NodeSource PPA
+RUN echo 'Package: nodejs\nPin: origin deb.nodesource.com\nPin-Priority: 600' > /etc/apt/preferences.d/nodesource \
+    && curl -fsSL https://deb.nodesource.com/setup_16.x | bash - \
+    && apt-get update \
+    && apt-get install -y nodejs
+
+# Install yarn
+RUN npm install -g yarn
+
+# Set working directory
+WORKDIR /app
+
+# Copy requirements and dependency files to the working directory
+COPY requirements.txt .
+COPY package.json .
+COPY yarn.lock .
+
+# Copy the rest of the application code
+COPY . .
+
+# Install Python dependencies
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Install dependencies
+RUN yarn install
+
+# Expose the port that the app runs on
+EXPOSE 8080
+
+# Start the app in development mode
+CMD ["yarn", "develop"]

README.md

@@ -16,6 +16,13 @@ Sources:
 
 GraphQL requires data key names to have no spaces or special characters, so there's a raw data file (only filtered by GHG emissions > 1,000 tons and year = 2020) and a cleaned file that just hast he headers renamed for GraphQL.
 
+## Tools
+
+[python](https://www.python.org/) and [pandas](https://pandas.pydata.org/)
+for data processing
+
+Leaflet and Leaflet Google mutant https://www.npmjs.com/package/leaflet.gridlayer.googlemutant
+
 ## General To-Do List
 
 - [x] Pick a framework - statically built VueJSS, maybe [VitePress](https://vitepress.dev/guide/getting-started)
@@ -36,112 +43,90 @@ GraphQL requires data key names to have no spaces or special characters, so ther
 - [ ] Create ward page that shows data by ward (needs new data source)
 - [ ] Figure out a way to rank buildings by opportunity for improvement (perhaps higher than avg. in category, uses a lot of natural gas?)
 
+## Environment setup
 
-## Development
+### **1. Set up Docker**
 
-### Front-End Setup
+Docker is the recommended approach to quickly getting started with local development. Docker helps create a version of the Electrify Chicago website on your computer so you can test out your code before submitting a pull request.
 
-Make sure you **are running Node v16** and have [Yarn](https://yarnpkg.com/) installed, the
-`cd` into the project directory (after cloning it) and run:
+- The recommended installation method for your operating system can be found [here](https://docs.docker.com/install/). 
+- [Get started with Docker](https://docs.docker.com/get-started/)
 
-```bash
-yarn install
-```
+### **2. Start Docker**
 
-### Running The Front-End
+> [!IMPORTANT]
+> Please make sure the `Docker Desktop` application is **running on your computer** before you run the bash commands below.
 
-Run `yarn develop` to start a local dev server at `http://localhost:8080`
-
-Happy coding 🎉🙌
-
-### Run Front-End Linting
-
-To run linting with auto-fix, run:
+This command starts server locally. To start it, `cd` into the project directory in your terminal then run the following command: 
 
 ```bash
-yarn lint-fix
+ docker-compose up
 ```
 
-## Deploys
-
-This site deploys automatically via Netlify by running `gridsome build`.
+Running the above command will result in the following output in your terminal
 
+<details>
+  <summary><strong>Click here</strong> to see an example terminal output</summary>
+  <img width="662" alt="Screenshot 2024-04-05 at 7 23 04 PM" src="https://github.com/gaylem/electrify-chicago/assets/76500899/ad25d216-d58d-48f1-9f7c-16473db50537">
+</details>
 
-## Tools
+When you see the above output, it means the site is now running and now you can browse to http://localhost:8080
 
-[python](https://www.python.org/) and [pandas](https://pandas.pydata.org/)
-for data processing
+### **3. Stop Docker**
 
-Leaflet and Leaflet Google mutant https://www.npmjs.com/package/leaflet.gridlayer.googlemutant
+- To stop and completely remove the server (i.e. the running Docker container), run `docker-compose down`
+- To stop the server, but not destroy it (often sufficient for day-to-day work), run `docker-compose stop`
+- Bring the same server back up later with `docker-compose up`
 
+## Open Bash Shell
 
-## Data Processing
+> [!IMPORTANT]
+> To run any of the commands below, you'll need to do the following:
+> 1. Open a new terminal and `cd` into the root project directory after spinning up your Docker container
+> 2. Open up a bash shell inside the Docker container with the following command:
 
-### Python Setup (For Data Processing & tests)
-
-This project's Python data pipeline requires:
-
-- pip
-- python 3.9
+```bash
+docker-compose exec electrify-chicago bash
+```
+### Run Front-End Linting
 
-To install our Python dependencies, from the root of the project, run:
+To run linting with auto-fix, run the following command inside the Docker bash shell:
 
 ```bash
-pip install --no-cache-dir -r requirements.txt
+yarn lint-fix
 ```
 
 ### Run Data Processing
 
-If you update the raw data CSVs or the data scripts that post-process them (like if you are adding
-a new statistical analysis), you need to re-run the data processing. Make sure to follow the "Python
-Setup" steps first.
+1. If you update the raw data CSVs or the data scripts that post-process them (like if you are adding
+a new statistical analysis), you need to re-run the data processing. 
 
-To then process a new CSV file (at `src/data/source/ChicagoEnergyBenchmarking.csv`), from the project
-directory run:
+2. To then process a new CSV file (at `src/data/source/ChicagoEnergyBenchmarking.csv`), you need to run the following command inside the Docker bash shell:
 
 ```bash
 bash run_all.sh
 ```
 
 ### Run Data Processing Tests
 
-Make sure test data is created/replaced before running tests by running the following script from
-the main project directory (it will overwrite the existing test data file if it exists):
+1. Make sure test data is created/replaced before running tests by running the following script from
+the Docker bash shell (it will overwrite the existing test data file if it exists):
 
 ```bash
 bash create_test_data.sh
 ```
 
-To run all tests simply in the project directory run:
+2. To run all tests in the project directory, enter the following command inside the Docker bash shell:
 
 ```bash
-pytest
+python -m pytest
 ```
-
-This assumes that `pytest` has been installed, see setup.
-
-Run the following command for individual unit test suite (where XXX is something like
-`test_clean_all_years`):
+3. Run the following command for individual unit test suite (where YOUR_FILE_NAME is something like
+`test_clean_all_years`) in the Docker bash shell:
 
 ```bash
-python3 -m pytest test/data/scripts/unit/XXX.py
-```
-
-
-## Known Development Issues
-
-#### macOS libvips Error
-
-If you encounter an error on macOS such as `sharp Prebuilt libvips 8.10.5 binaries are not yet available for darwin-arm64v8`, you'll need to install these dependencies separately. Install the [Brew package manager](https://brew.sh/), then run the following commands:
-
-```
-brew install --build-from-source gcc
-xcode-select install
-brew install vips
+python -m pytest tests/data/scripts/unit/YOUR_FILE_NAME.py
 ```
-=======
-**Important!** When you update the data, make sure to update the `LatestDataYear` in
-`globals.vue`, as well as the filter year in all page queries.
 
 ## Managing The Data
 
@@ -189,3 +174,8 @@ const BuildingOwnerIds = [
 
 **Note:** You'll have to restart your `yarn develop` after step 3 to see changes, since
 `gridsome.server.js` just runs once.
+
+## Deploys
+
+This site deploys automatically via Netlify by running `gridsome build`.
+

docker-compose.yml

@@ -0,0 +1,14 @@
+version: '3.8'
+
+services:
+  electrify-chicago:
+    image: electrify-chicago:latest
+    build:
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8080:8080"
+    volumes:
+      - .:/app
+      - /app/node_modules
+    command: yarn develop