Building a weather application
Learn how to build a fully styled weather dashboard in Aurelia 2 with Tailwind CSS and Vite.
Aurelia 2 provides a powerful and flexible framework for building modern web applications. By integrating Tailwind CSS and Vite, we can create a fully responsive and beautifully styled weather dashboard that fetches real-time weather data. This guide will walk you through setting up the project, configuring Tailwind CSS, and building the UI.
Prerequisites
Ensure you have Node.js (latest LTS version recommended) installed.
1. Setting Up the Aurelia Project with Vite
Create a New Aurelia Project
Run the following command to scaffold a new Aurelia 2 project using Vite:
npx makes aurelia
Select "Default TypeScript App" and "Vite" as the bundler when prompted. When you're asked for a name, make something up or use weather-app
.
Navigate to Your Project Directory
cd weather-app
2. Installing and Configuring Tailwind CSS
Install Tailwind CSS and Its Vite Plugin
To integrate Tailwind CSS with Vite, install the required dependencies:
npm install tailwindcss @tailwindcss/vite -D
Configure Vite to Use Tailwind CSS
Update your vite.config.ts
to include the Tailwind CSS Vite plugin:
// vite.config.ts
import { defineConfig } from 'vite';
import aurelia from '@aurelia/vite-plugin';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [aurelia(), tailwindcss()],
});
Include Tailwind in Your CSS
In your scaffolded project, you'll see a my-app.css
file. Open it and add the following:
/* src/my-app.css */
@import 'tailwindcss';
Aurelia will automatically include this file when you run npm start
because of the default conventions support in Aurelia projects.
3. Implementing the Weather Dashboard
Fetching Weather Data
Sign up for a free API key from OpenWeatherMap to fetch real-time weather data. You get a few thousand requests per day for free.
Create a Weather Service to handle API requests:
// src/services/weather-service.ts
import { HttpClient } from '@aurelia/fetch-client';
export class WeatherService {
private http: HttpClient = new HttpClient();
private apiKey = 'YOUR_API_KEY';
private baseUrl = 'https://api.openweathermap.org/data/2.5/';
async getWeatherByCity(city: string): Promise<any> {
const response = await this.http.fetch(
`${this.baseUrl}weather?q=${city}&appid=${this.apiKey}&units=metric`
);
if (response.ok) {
return response.json();
} else {
throw new Error('City not found');
}
}
}
4. Creating the Weather Dashboard Component
Weather Dashboard View Model
Create a component that fetches weather data and manages state:
// src/components/weather-dashboard.ts
import { ICustomElementViewModel, inject } from 'aurelia';
import { WeatherService } from '../services/weather-service';
@inject(WeatherService)
export class WeatherDashboard implements ICustomElementViewModel {
public city = 'Brisbane';
public weatherData: any = null;
public errorMessage: string | null = null;
constructor(private weatherService: WeatherService) {}
async attached() {
await this.fetchWeather();
}
async fetchWeather() {
try {
this.errorMessage = null;
this.weatherData = await this.weatherService.getWeatherByCity(this.city);
} catch (error) {
this.errorMessage = error.message;
this.weatherData = null;
}
}
async search() {
await this.fetchWeather();
}
}
Weather Dashboard View (HTML)
Now, style the dashboard UI with Tailwind CSS:
<!-- src/components/weather-dashboard.html -->
<div class="max-w-md mx-auto p-6 bg-white shadow-xl rounded-lg">
<h1 class="text-3xl font-bold mb-6 text-center text-blue-600">Weather Dashboard</h1>
<form submit.trigger="search" class="flex mb-6">
<input
type="text"
value.bind="city"
placeholder="Enter city name"
class="flex-grow p-2 border border-gray-300 rounded-l focus:ring focus:ring-blue-200"
/>
<button
type="submit"
class="p-2 bg-blue-500 text-white rounded-r hover:bg-blue-600 transition"
>
Search
</button>
</form>
<div if.bind="errorMessage" class="text-red-500 text-center font-semibold">
<p>${errorMessage}</p>
</div>
<div if.bind="weatherData" class="text-center">
<h2 class="text-xl font-semibold text-gray-900">${weatherData.name}, ${weatherData.sys.country}</h2>
<p class="text-gray-700 text-lg">🌡️ ${weatherData.main.temp}°C</p>
<p class="text-gray-600 capitalize">☁️ ${weatherData.weather[0].description}</p>
<p class="text-gray-600">💧 Humidity: ${weatherData.main.humidity}%</p>
<p class="text-gray-600">💨 Wind Speed: ${weatherData.wind.speed} m/s</p>
</div>
</div>
5. Adding the Component to the Application
Include the Weather Dashboard component in your main app:
<!-- src/my-app.html -->
<weather-dashboard></weather-dashboard>
6. Running the Application
Start the development server:
npm start
The browser will open automatically to the Aurelia app.
7. Additional Enhancements
Dark Mode Support: Configure Tailwind to support dark mode and apply corresponding styles.
Responsive Design: Utilize Tailwind’s responsive utilities for mobile-friendly UI.
Custom Themes: Extend Tailwind’s theme in tailwind.config.js for custom branding.
Hourly Forecast: Fetch and display hourly or weekly weather forecasts.
Conclusion
This guide demonstrated how to integrate Tailwind CSS with Aurelia 2 using Vite, enabling a responsive, modern, and styled weather dashboard. With real-time weather data from OpenWeatherMap, this project highlights Aurelia’s data-binding and service integration capabilities.
For more details on Tailwind CSS, refer to the official documentation.
Last updated
Was this helpful?