weather ·

Full-Stack Web App (consists of a client side and a server part) as a playground for experiments and learning Docker/Docker Compose/NGINX etc.

About

Application called Weather has the following capabilities:

• input field for location name, and a submit button in browser UI
• user can specify some location name for getting weather for and press the button
• back-end listen for POST HTTP request and validate user input from it
• back-end communicates with two external services:
  • OpenWeather for retrieving weather for particular location
  • Pexels for retrieving image demonstrated the specific weather state
• both weather and image metadata return by back-end to the browser
• client logic parses the given JSON data and render it appropriately

Containerize

Choose suitable variant from the below and normally the Web UI should be available on http://localhost:8080/.

1. One-Command Deployment (without cloning the repo)

curl -L https://github.com/zhibirc/weather/archive/refs/tags/v1.0.tar.gz | tar xz && cd weather-1.0 && npm start

2. One-Command Deployment (after cloning the repo)

# it calls "docker compose up --build"
npm start

3. Build and setup manually

# build and deploy front-end
docker build --tag front-end --no-cache ./public
# build and deploy back-end
docker build --tag back-end --no-cache ./server
# create network to connect both parts
docker network create weather-net
# run server and add to existing network
docker run --name back-end --network weather-net -p 8081:8081 -d back-end
# run front-end and add to existing network
docker run --name front-end --network weather-net -p 8080:80 -d front-end

For public aka front-end part the nginx.conf (default NGINX configuration file) is mounted from host system (./public/nginx.conf) for simplifying development process. Edit this file if needed and send the HUP signal to Docker to reload the NGINX configuration:

docker kill -s HUP <container_name>

Contributing

I'm grateful to the community for contributing bug fixes and improvements. Read checklist to learn how you can take part in improving.

License

weather is MIT licensed

favicon author: © 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji) | CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)