Example: Weather app

This repository demonstrates some essential concept of the UIX framework such as SSR and Web components using the example of a weather app.

Installation

1. Install the UIX command line tool following the Getting Started guide in our documentation.

2. Clone this repository to your local machine:

   $ git clone https://github.com/unyt-org/example-weather-app.git

3. Request a free API key from weatherapi.com

4. Create an API_KEY-environment variable

   $ export API_KEY="<YOUR_KEY>"

5. Run the project local

   $ uix --port 8000

6. Navigate to your favourite web browser and open http://localhost:8000 to see everything in action.

Structure

This diagram outlines the UIX default project structure. Since everything is rendered on the server there is just a back-end folder.

.
└── example-weather-app/
    ├── backend/
    │   ├── .dx                 // Config file for deployment
    │   ├── Weather.ts          // Weather API
    │   └── entrypoint.tsx      // Back-end entrypoint
    ├── common/
    │   ├── components/
    │   │   ├── Search.scss     // Search style declaration
    │   │   ├── Search.tsx      // Search component
    │   │   ├── Overview.scss   // Overview style declaration
    │   │   └── Overview.tsx    // Overview component
    │   ├── theme.tsx           // Theme definition
    │   ├── weather-theme.scss  // Theme stylesheet
    │   └── res/                // Ressources folder
    ├── app.dx                  // Endpoint config file
    └── deno.json               // Deno config file

Features

• Location search
• 3 days Forecast, Air Quality, Sunrise info

Preview

Explanation

Environment Variables

In DATEX, environment variables can be accessed using Datex.Runtime.ENV.

---

_{© unyt 2025 • unyt.org}