https://github.com/andyrids/svelte-weather
JAMStack weather application, using Netlify functions (OpenWeatherMap & LocationIQ APIs), Svelte, Snowpack & Chart.js.
https://github.com/andyrids/svelte-weather
chartsjs indexeddb locationiq netlify-functions openweathermap snowpack svelte sveltejs web-worker
Last synced: 8 months ago
JSON representation
JAMStack weather application, using Netlify functions (OpenWeatherMap & LocationIQ APIs), Svelte, Snowpack & Chart.js.
- Host: GitHub
- URL: https://github.com/andyrids/svelte-weather
- Owner: andyrids
- License: mit
- Created: 2021-02-01T15:55:27.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2021-02-05T10:58:33.000Z (over 4 years ago)
- Last Synced: 2025-01-15T15:50:54.556Z (10 months ago)
- Topics: chartsjs, indexeddb, locationiq, netlify-functions, openweathermap, snowpack, svelte, sveltejs, web-worker
- Language: JavaScript
- Homepage:
- Size: 572 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
[](https://app.netlify.com/sites/svelte-open-weather/deploys)
# Svelte Weather App ([view site](https://svelte-open-weather.netlify.app/))
JAMStack PWA weather app, using [LocationIQ](https://locationiq.com/) API for forward and reverse geocode and [OpenWeatherMap](https://openweathermap.org/) API for the weather data. [Netlify functions (AWS Lambda)](https://docs.netlify.com/functions/overview/) are used to connect the frontend with the backend APIs. [Chart.js](https://www.chartjs.org/) is used to visualise the weather data. [Snowpack](https://www.snowpack.dev/) was used as the build tool.
The app also uses IndexedDB to persist user settings and bookmarked locations. The API is wrapped to make it promise based and easier to use with a web worker, which is used to intialise, open the DB and store and retrieve data.
The app was inspired by a [guide](https://renedellefont.com/writing/building-a-weather-app/) that detailed how to build a weather app using Svelte, Tailwind and Netlify. I used this project to put into practice, everything that I had learned upto this point and so, that should be taken into consideration.
It's still a work in progress and I will be making continuous imporvements, especially regarding PWA functionality.
NPM packages can be installed after clone by running:
```npm
npm install
```
Build requires [Netlify CLI](https://docs.netlify.com/cli/get-started/).
* ```npm install netlify-cli -g```
Install Netlify CLI.
* ```netlify login```
Authorise Netlify CLI with Netlify account.
* ```netlify init```
Create and Connect a Netlify site. I connected manually intially, during development and later
connected the site to a GitHub repo.
* ```netlify.toml```
Development & build settings are already entered, with comments, in the netlify.toml file.
* ```.env & evironment variables```
Environment variables were set in a .env file and in the Netlify site build & deploy settings
```
OPEN_WEATHER_KEY = cb6a533dd...
LOCATION_IQ_KEY = pk.cb58268...
```
* ```netlify dev```
Calls npm run dev and serves the Svelte app at http://localhost:8888. Snowpack dev server (npm run start), uses
http://localhost:8080 and Netlify CLI acts a proxy for the netlify functions. netlify.toml shows this in the
settings under ```[dev]```.
## Available Scripts
### netlify-dev
Runs the Netlify development server (http://localhost:8888) and acts as a proxy for the netlify functions and the
Snowpack app in development mode (http://localhost:8080).
This is the only script I was using in development, in order to test the Netlify functions and impliment them.
### npm start
Runs the app in the development mode.
Open http://localhost:8080 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
### npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
### npm run build
Builds a static copy of your site to the `build/` folder.
Your app is ready to be deployed!
**For the best production performance:** Add a build bundler plugin like [@snowpack/plugin-webpack](https://github.com/snowpackjs/snowpack/tree/master/plugins/plugin-webpack) or [snowpack-plugin-rollup-bundle](https://github.com/ParamagicDev/snowpack-plugin-rollup-bundle) to your `snowpack.config.json` config file.