DEV Community: Hasibul Alam Ratul

Nuxt Server-Side Proxy for Open Weather Api

Hasibul Alam Ratul — Sun, 11 Aug 2024 13:49:37 +0000

Intro

A common problem when using open weather api is Cross-Origin Resource Sharing (CORS) issues. This typically happens when you're trying to make an API call from a web application running in a browser, and the browser blocks the request because the API server does not include the necessary CORS headers in its response. The quickest fix is to add a cors header however, as we do not control the api server we can not add a cors header even if we wanted too.

Solutions

There are many ways of resolving this issue but below two are the ones I tested and have worked for me.

CORS Anywhere

One service I found that worked for me was CORS Anywhere which adds CORS headers to the proxied request. To use it, we will need to append the hosted NodeJs server url before the api url. Keep in mind that the public instance has a limited number of requests, so it's a good idea to host your own using the CORS Anywhere repository.

For example:

https://cors-anywhere.herokuapp.com/http://api.openweathermap.org/data/2.5/weather?q=london&APPID={apikey}

Personally, for small projects, I prefer not to juggle multiple codebases (maybe I'm just a bit lazy 🤣). With NuxtJs, you can get everything done with less fuss and even add some extra features. I'm sure you can do the same with NextJs and serverless functions.

Nuxt Server-Side Proxy

To start create a file in the api folder on nuxt server directory. I named it weather.js. As nuxt has a file based routing the endpoint will be /api/weather

File structure

root
├─ server
│  ├─ api
│  │  └─ weather.js

Server Side

In the code snippet below, I'm setting up a basic API handler to get weather data using the fetch function. If you're more into axios, feel free to swap it in instead.

import { getQuery } from 'h3';

export default defineEventHandler(async (event) => {
  // Extract query parameters from the event using getQuery
  const { query } = getQuery(event);

  // Access runtime configuration to retrieve the API key for OpenWeatherMap
  const config = useRuntimeConfig();
  const apiKey = config.private.openWeatherApiKey;

  // Construct the API URL for the weather request
  const apiUrl = `https://api.openweathermap.org/data/2.5/${query}&units=metric&appid=${apiKey}`;

  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      return {
        statusCode: response.status,
        body: { message: response.statusText },
      };
    }
    const data = await response.json();
    return {
      status: 200,
      message: 'Weather fetched successfully',
      data,
    };
  } catch (error) {
    return {
      statusCode: 500,
      body: { message: 'Internal Server Error' },
    };
  }
});

One cool thing I noticed about using this setup is that it hides both the API URL and the API key.

Original URL: https://api.openweathermap.org/data/2.5/weather?q=London&units=metric&appid=${apiKey}
Masked URL: https://atmosdev.netlify.app/api/weather?query=weather?q=London

So, not only does it simplify the URL, but it also keeps your API key under wraps.

Client Side

Now, all you need to do is pass in the query and fetch the data on the client side, and you're good to go!

const getWeather = async (event) => {
  try {
    const response = await $fetch(`/api/weather?query=London`);
    if (response.status === 200) {
      weather.value = response.data;
    } else {
      console.error("No data returned from the API");
    }
  } catch (error) {
    console.error("Error fetching weather data:", error);
  }
};

Here is the API response data

Deployed App

https://atmosapp.netlify.app/

Unique approach of CSS custom property

Hasibul Alam Ratul — Fri, 29 Dec 2023 05:09:39 +0000

CSS Custom Properties offers great flexibility and modularity to a stylesheet. Allows developers to centralize values and simplify maintaining and updating multiple elements simultaneously across the entire project. Custom properties can go from simple color and shadow values to dynamic changes to styles based on user interactions or other events using JavaScript. Recently, I came across an example by Lea Verou that used custom property in a way that was quite unique. So, let's see the approach.

Introduction

Suppose we have multiple cards with different background colors, button variants, and hover effects like the image above. Typically, the best approach will be to have a class for the card element with all the default styling and then use individual classes for the different cards and change the colors one by one, as shown in the example below.

.card {
  position: relative;
  min-height: 200px;
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
  background-color: white;
  display: flex;
  flex-direction: column;
  gap: 10px;

    &.js {
        background-color: #fefce8;
    }
}

However, there is a much easier way you can achieve the same result. You need to first understand the concept, which may not seem simple at first, but it makes more sense when you understand it.

Pseudo-private custom property approach:

The aim is to mimic the behaviour of private properties in JavaScript within the realm of CSS. The analogy drawn here is to JavaScript, where developers used naming conventions (like underscores or other prefixes) to signify private properties before introducing actual private properties in the language. Similarly, in CSS, this creates a distinction between the properties used internally and exposed. Although the private custom properties aren’t private in practicality, they are put in place for a clear distinction.

.card {
    --_background: var(--background, white);
    --_border: var(--border, #333);
    --_button-hover: var(--button, #333);
    --_shadow: var(--shadow, white);
}

For this example we will change the background, border, button hover and shadow color. So, we define the respective custom properties with an underscore like --_background and set variable which is exposed --background in the card class. Here, we can set fallback values, which also act as a default value for each of the cards. Now, the only thing is to set the private properties internally, such as changing the background-colour property with the private property and doing the same with the rest of the properties.

.card {
    background-color: var(--_background);
    &::after {
      background: var(--_shadow);
    }
    .btn {
    background-color: var(--_border);
      &:hover {
        border-color: var(--_border);
        background-color: var(--_button-hover);
      }
   }
     img {
         border: 4px solid var(--_border);
     }
}

As the default structure is set, to apply styles, all you need to do is set your desired value to the properties that are exposed, and if no style is set, then it will apply the fallback values. Here is an example with and without style.

Code:

.js {
  --shadow: var(--clr-yellow-dark);
  --background: var(--clr-yellow);
  --border: var(--clr-yellow-dark);
  --button: var(--clr-yellow);
}
.python {
    /* no value set in this card */
}

.ruby {
  --shadow: var(--clr-red-dark);
  --background: var(--clr-red);
  --border: var(--clr-red-dark);
  --button: var(--clr-red);
}

Preview:

You can see that with this approach, you are only setting values to the custom properties and having the option for a set of default values in place. For details explanation checkout the reference section.

Layout Change:

Although changing colors is okay, you can change the entire layout by defining another custom property. By adding data attributes and JavaScript a lot can be done. Checkout CodePen for the whole code.

CodePen:
https://codepen.io/ratul16/pen/NWJqGRv

Reference:
https://lea.verou.me/blog/2021/10/custom-properties-with-defaults/

Expandable Cards

Hasibul Alam Ratul — Tue, 14 Feb 2023 05:05:29 +0000

A flex card animation which reveal more information or content within. This uses flexbox in combination with grid layout and is triggered by hovering over the card. By default the layout is flexbox but in smaller screen size it uses grid layout

Card Cover Flow Slider

Hasibul Alam Ratul — Tue, 14 Feb 2023 05:03:14 +0000

A cover flow card slider using SwiperJs

Orbital Animation

Hasibul Alam Ratul — Tue, 14 Feb 2023 04:58:39 +0000