This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- @vitejs/plugin-react uses Babel for Fast Refresh
- @vitejs/plugin-react-swc uses SWC for Fast Refresh
![Screenshot 2023-08-03 at 16 02 11](https://private-user-images.githubusercontent.com/74870372/258157574-debcfd57-1f79-412f-8f89-cbe69708ee2b.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQyNDk4NjcsIm5iZiI6MTcyNDI0OTU2NywicGF0aCI6Ii83NDg3MDM3Mi8yNTgxNTc1NzQtZGViY2ZkNTctMWY3OS00MTJmLThmODktY2JlNjk3MDhlZTJiLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIxVDE0MTI0N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTE2ZmU5YTM5MjFmMmNiOWMxNDRkZWI4ODQ2NGMzNjY3MDAxM2ZhNjMwYWJiNDdhMjhhOWIzZGVlZmE0YThhN2YmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.sOG7WiCcBYlviPOMGQCWblZVGr-fmXTIyAzFfQeBpe4)
![Screenshot 2023-08-03 at 16 02 22](https://private-user-images.githubusercontent.com/74870372/258157629-321e3ece-ab00-40d5-9f53-27ed910da89d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQyNDk4NjcsIm5iZiI6MTcyNDI0OTU2NywicGF0aCI6Ii83NDg3MDM3Mi8yNTgxNTc2MjktMzIxZTNlY2UtYWIwMC00MGQ1LTlmNTMtMjdlZDkxMGRhODlkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIxVDE0MTI0N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTYxYTY4NDU2ZDA5ZDExMzk5YTRhNTY1Y2QwOGQzNDg5Y2JkMjg0NTQ1OGNlNzg4ZDNkNDU0MjU4ZmVhMDQ4YzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.h9YUq9txjYF45POF93ymzzcjcLCpxudSVAILM0gfWj8)
![Screenshot 2023-08-03 at 16 02 50](https://private-user-images.githubusercontent.com/74870372/258157662-7cf86546-efcd-46ce-bb7b-90c26c5f91ed.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQyNDk4NjcsIm5iZiI6MTcyNDI0OTU2NywicGF0aCI6Ii83NDg3MDM3Mi8yNTgxNTc2NjItN2NmODY1NDYtZWZjZC00NmNlLWJiN2ItOTBjMjZjNWY5MWVkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIxVDE0MTI0N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc3NGQzOTc3YzU1NTM0NWJkZTA3ZDE0ZTdiMTU2N2NiYmQ0NGZjYmU0MzNmYWExMjQ4NGQxMmMxMjZhZmMyM2EmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.8GpowwzqPIIJnrxvr6L3e0XVT-ESp5JRYxdI2r3hwUA)
![Screenshot 2023-08-03 at 16 02 56](https://private-user-images.githubusercontent.com/74870372/258157682-3d4257ea-5977-4c96-917c-b4659a708150.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQyNDk4NjcsIm5iZiI6MTcyNDI0OTU2NywicGF0aCI6Ii83NDg3MDM3Mi8yNTgxNTc2ODItM2Q0MjU3ZWEtNTk3Ny00Yzk2LTkxN2MtYjQ2NTlhNzA4MTUwLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA4MjElMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwODIxVDE0MTI0N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPWQ2Y2QyZDlhYTRlMmYwY2RlZTQ0NDk1NjQ1MzNkNWU4NzVjNmIwOGUxZjIzNzRkMDhhODBjMGE2ODRlMGQwMmImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.Jyf6BTEKUtx_omPR6n5_ryCWFidrj0q0GRgEh8aXB1Q)
Install dependencies:
npm install
Create a .env
file and add your API key. You can get your key at https://home.openweathermap.org/api_keys.
VITE_API_KEY=ADD_YOUR_KEY_HERE
Important: Your API key is not secure as there is no backend. If you decide to use this tool in production, you should add a backend and store the API key there.
Run the dev server:
npm run dev
Open http://localhost:5173 with your preferred browser to see the result.
To build for production:
npm run build
Thanks