Madrid Recicla Web

Madrid Recicla Web is part of the distributed application Madrid Recicla.

Madrid Recicla Web allows user to find and filter recycling points of interes like recycling containers (for clothes, vegetable oil, batteries, paper, glass, organic, etc.) as well as static and mobile recycling units.

Before starting
Using the service
Developer information
Others

Before starting

Before cloning this repository make sure you've read the Madrid Recicla Development Template guide. This guide will help you to setup your local environment.

Using the service

Madrid Recicla Web displays a map with the recycling points of interest, centered on the user's location. Different icons will represent different types of recycling points for quick identification. Also, times and abailability of the recycling points will be presented in the point's description.

Developer information

Build argument variables

Madrid Recicla Web uses a set of argument variables that need to be setup before building the application. These arguments are used to build static files which will eventually be added to the Docker image. To do so, create a file called build.args in the root directory of the project with proper values for the following keys:

ARG SERVER_URL=${SERVER_URL} # Madrid Recicla Server's URL
ARG CLOTHES_CONTAINERS_PATH=${CLOTHES_CONTAINERS_PATH} # Path provided by Madrid Recicla Server, relative to clothes containers.
ARG MAPBOX_TOKEN_PATH=${MAPBOX_TOKEN_PATH} # Path provided by Madrid Recicla Server, relative to Mapbox Token.

⚠️ Notice the ARG keyword before each key=value pairs.

⚠️ Notice that build.args file is ignored for commits in .gitignore file as this should never be pushed to the repo.

Running the application in a Docker container

The source code contains a Dockerfile and a .dockerignore file that allow for quick building and running an image in local Docker Containers.

While located in the directory where these files are located, run the following commands:

To build the image

% docker build -t madrid-recicla-web $(for i in `cat .build.args`; do out+="--build-arg $i " ; done; echo $out;out="") .

* Notice the dot (.) at the end of the command.

To run the image inside a Docker container

% docker run -p 8000:80 -e PORT=80 madrid-recicla-web

* -p "${WEB_PORT}:${WEB_CONTAINER_PORT}" will expose port WEB_CONTAINER_PORT inside the container to port WEB_PORT outside the container. The -e PORT=${WEB_CONTAINER_PORT} will provide an environment variable called PORT. This PORT will be used at image deploy time to replace the placeholder in nginx.conf file.

Running the application in your local machine

You can, however, manually run your web app without using Docker by following these steps:

Install dependencies described in package.json.
```
% npm install
```
Create a file called .env in the root directory of the project with proper values for the following keys:
```
SERVER_URL=${SERVER_URL} # Madrid Recicla Server's URL
CLOTHES_CONTAINERS_PATH=${CLOTHES_CONTAINERS_PATH} # Path provided by Madrid Recicla Server, relative to clothes containers.
MAPBOX_TOKEN_PATH=${MAPBOX_TOKEN_PATH} # Path provided by Madrid Recicla Server, relative to Mapbox Token.
```
⚠️ Notice there are NO ARG keyword before each key=value pairs as it was in the .build.args file in the previous section.

⚠️ Notice that .env file is ignored for commits in .gitignore file as this should never be pushed to the repo.
Build static files for dev environment using
```
% npm run build:dev
```
or build static files for prod environment using
```
% npm run build:prod
```
A dist folder will be created in the root directory of the project. In there, an index.html file will allow you to run the app.

martinezcarlos/madrid-recicla-web