⛅ web weather PWA

About

OpenWeather to get some data about current temperature, wind speed, pressure etc.

Setup

Install dependencies:

npm install

Run application locally:

npm run serve

Check app at http://localhost:8080/

To create production build:

npm run build

API Proxy

To get access for OpenWeather you can use proxy server. For example you can setup any of this:

• CloudFlare proxy workers, they are free to deploy
• Use simple Express server with proxy middleware
• Deploy a custom Nginx reverse proxy, example of Nginx config:

http {
    server {

        listen 8888;

        location / {
            return 200 "Welcome to the NGINX proxy";
        }

        # proxy-url.com/proxy?target=target-api-url.com
        location /proxy {
            # need for dynamic proxy_pass adress
            resolver 1.1.1.1;
            proxy_pass $arg_target;
        }
    }
}

Environment variables

Name	Description
VUE_APP_API_URL	API URL
VUE_APP_API_KEY	OpenWeather API key
VUE_APP_GET_IMG_URL	URL to get images from API
VUE_APP_API_PROXY	API proxy URL

Stack

• Vue.js 2.6.11
• Vuex 3.5.1
• Axios
• SCSS
• GitHub actions for CD
• CloudFlare workers for API reverse proxy