Forem: Akuma Isaac Akuma

How to setup your local network to access your local server with a domain name and wildcard subdomains

Akuma Isaac Akuma — Sun, 21 May 2023 12:45:05 +0000

Wildcard subdomains can be used to create a new subdomain on the fly, without having to configure it on the server and as well used as a unique identifier for each user or organization in a multi-tenant application.

For example, if you have a multi-tenant application and you want to give each user a unique subdomain, you can use the wildcard subdomain to proxy the request to the server and then the server can use the subdomain to identify the user.
But do be able to do that, you need to configure your local network to proxy all subdomains to the server and then configure the server to handle the subdomain.
That is what this guide is about.

1. add host to /etc/hosts

sudo nano /etc/hosts

add this line to the end of the file

127.0.0.1      example.test

2. install nginx and configure it

brew update
brew install nginx

check the config file path by running

nginx -t

it should be something like

nginx: the configuration file /opt/homebrew/etc/nginx/nginx.conf syntax is ok
nginx: configuration file /opt/homebrew/etc/nginx/nginx.conf test is successful

open the config file

sudo nano /opt/homebrew/etc/nginx/nginx.conf

and add this to the end of the file

   server {
        listen 80;
        listen [::]:80;

        server_name ~^(?<subdomain>.+).example.test$ example.test;

        access_log /opt/homebrew/etc/nginx/$host-access.log;
        error_log  /opt/homebrew/etc/nginx/$host-error.log;

        location / {
            proxy_pass http://127.0.0.1:4000;
            proxy_http_version 1.1;
            proxy_set_header    Upgrade $http_upgrade;
            proxy_set_header    Connection ‘upgrade’;
            proxy_set_header    Host $host;
            proxy_cache_bypass  $http_upgrade;
            proxy_set_header    X-Real-IP $remote_addr;
            proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header    X-Subdomain "$subdomain";
        }
    }

restart nginx

brew services restart nginx

At this point you should be able to access your local server at http://example.test but not at http://subdomain.example.test yet.

See the next step to configure dnsmasq to proxy all subdomains to the server.

3. install dnsmasq

brew install dnsmasq

4. configure dnsmasq

sudo mkdir -p $(brew --prefix)/etc/dnsmasq.d
sudo echo 'address=/.test/127.0.0.1' > $(brew --prefix)/etc/dnsmasq.d/test.conf
sudo brew services restart dnsmasq

tell macOS to forward all .test domains to dnsmasq

sudo mkdir -p /etc/resolver
sudo bash -c 'echo "nameserver 127.0.0.1" > /etc/resolver/test'

done! now you can access your local server at http://example.test, and any subdomain will be proxied to the server as well (e.g. http://subdomain.example.test)

Once you start writing a lot of code you're surely doing it wrong

Akuma Isaac Akuma — Tue, 05 Jan 2021 13:07:50 +0000

On several occasions, I've had a moment when very few lines of code solved an issue I was trying to solve earlier with very complicated or confusing and huge lines of codes which makes me come to the conclusion to this saying

Once you start writing a lot of code you're surely doing it wrong

Here's a recent example of me trying to convert a text to an Array of Strings based on the occurrence of a valid HTTP URL found in the text.
I was trying to implement a feature Twitter has , that's shortening and highlighting URLs found in a post which is very useful and could also help if you want to implement a secure redirect from your app.

My First attempt:

// Copied from https://stackoverflow.com/a/63022807/10365156
const linkReg = /(https?\:\/\/)?([\w\d-]+\.)*[\w-]+[\.\:]\w+([\/\?\=\&\#]?[\w-]+)*\/?/gm

const text =
  "Look at what he https://twitter.com/signalapp/status/1346258308496150528 vool     https://twitter.com/asemota/status/1346396079466622980"

 const links = post.title.match(linkReg) || []
  const texts = links.reduce((all, cur) => {
    if (all.length) {
      return all.map((v) => {
        let strs = []
        const all = v.split(cur)
        for (let [index, value] of all.entries()) {
          if (all.length - 1 === index) {
            strs.push(value)
          } else {
            strs.push(value, cur)
          }
        }
        return all
      }).flat()
    }
    return post
  }, [])

At this point, I was already confused and really tired as well, so I had to leave it for a while to clear my head.

And here is my second attempt:

const ph = "[z&&&&z]" // placeholder
let t = text.replace(linkReg, (v) => `${ph}${v}${ph}`)

console.log(t.split(ph))
// [
//   "Look at what he ",
//   "https://twitter.com/signalapp/status/1346258308496150528",
//   " vool     ",
//   "https://twitter.com/asemota/status/1346396079466622980",
//   "",
// ]

At this point, I've already achieved what I needed but going through MDN Specifying a string as a parameter reminded me about $& pattern so I refactored the code once more to get this

Third attempt:

const tokens = text.replace(linkReg, `${ph}$&${ph}`).split(ph)
console.log(tokens)
// [
//   "Look at what he ",
//   "https://twitter.com/signalapp/status/1346258308496150528",
//   " vool     ",
//   "https://twitter.com/asemota/status/1346396079466622980",
//   "",
// ]

This still gives me the same result as the second attempt but with lesser code, much readable and simpler overall.

Managing global DOM events in React with Hooks

Akuma Isaac Akuma — Fri, 04 Dec 2020 09:21:44 +0000

Creating UI components like dialog, modal, or drawers mostly requires adding keyboard accessibilities like closing them when ESC (escape) key is pressed, and doing so may require you to attach an event listener on Window object for keyup event inside use useEffect hook and as well removing the event listener when the component is destroyed.

So may end up having something like this below where ever you need a global event



useEffect(() => {
  const onESC = (ev: KeyboardEvent) => {
    if (ev.key === "Escape") {
      closeModal();
    }
  };
  window.addEventListener("keyup", onESC, false);
  return () => {
    window.addEventListener("keyup", onESC, false);
  };
}, []);

And I really don't like repeating alike code whenever possible, so let see we can hide most of this code since the only part that might change in different components will be the event handler



const onESC = (ev: KeyboardEvent) => {
    if (ev.key === "Escape") {
      closeModal();
     }
}

So let's start by extracting this to its own component



// ~/hooks/useGlobalDOMEvents.ts
export default function useGlobalDOMEvents() {
  useEffect(() => {
    const onESC = (ev: KeyboardEvent) => {
      if (ev.key === "Escape") {
        closeModal();
      }
    };
    window.addEventListener("keyup", onESC, false);
    return () => {
      window.addEventListener("keyup", onESC, false);
    };
  }, []);
}

Now our main goal is to make this function to accept multiple events and it's handlers, so let's define the type for our props



type Props = {
  [key in keyof WindowEventMap]?: EventListenerOrEventListenerObject;
};

export default function useGlobalDOMEvents(props:Props) {
  useEffect(() => {
    const onESC = (ev: KeyboardEvent) => {
      if (ev.key === "Escape") {
        closeModal();
      }
    };
    window.addEventListener("keyup", onESC, false);
    return () => {
      window.addEventListener("keyup", onESC, false);
    };
  }, []);
}

The props type with dynamic property keys will be very helpful for our editor autocomplete

Now let's refactor the useEffect block to attach events dynamically based on our props properties




export default function useGlobalDOMEvents(props: Props) {
  useEffect(() => {
    for (let [key, func] of Object.entries(props)) {
      window.addEventListener(key, func, false);
    }
    };
  }, []);
}

and we have to make sure will remove the event listener once the component is destroyed




export default function useGlobalDOMEvents(props: Props = {}) {
  useEffect(() => {
    for (let [key, func] of Object.entries(props)) {
      window.addEventListener(key, func, false);
    }
    return () => {
      for (let [key, func] of Object.entries(props)) {
        window.removeEventListener(key, func, false);
      }
    };
  }, []);
}

and full code will look like this



// ~/hooks/useGlobalDOMEvents.ts
import { useEffect } from "react";

type Props = {
  [key in keyof WindowEventMap]?: EventListenerOrEventListenerObject;
};

export default function useGlobalDOMEvents(props: Props) {
  useEffect(() => {
    for (let [key, func] of Object.entries(props)) {
      window.addEventListener(key, func, false);
    }
    return () => {
      for (let [key, func] of Object.entries(props)) {
        window.removeEventListener(key, func, false);
      }
    };
  }, []);
}

and usage will look like this



export default function Drawer(props: DrawerProps) {
  const { children, open, title, onClose } = props;
  useGlobalDOMEvents({
    keyup(ev: KeyboardEvent) {
      if (ev.key === "Escape") {
        onClose();
      }
    },
  });

  [...]
}

I hope you find this helpful.

The state of React's state management for me

Akuma Isaac Akuma — Sat, 28 Nov 2020 10:50:50 +0000

Initially, Reacts global and components level state managements was once the most time-consuming part whenever I start a new project, It's always the "which one to use?" question.

Should I use redux or redux-saga or mobx-react or mobx-state-tree or several other packages, but haven't gone back and forth Reacts own Context API combined with Reducer has been the real winner for me.
No external package or no need to state learning any package APIs.

So let me share what my store looks like, both in ReactNative and Web.

// ~/lib/store.tsx
import { createContext, Dispatch } from "react";

export interface IState {
  user: User;
  notifications: Array<INotification>;
}

export type Actions = {
  kind: keyof IState;
  payload?: any;
};

export function appReducer(state: IState, action: Actions) {
  state = { ...state, [action.kind]: action.payload };
  return state;
}

interface IContextProps {
  state: IState;
  dispatch: Dispatch<Actions>;
}

export const AppContext = createContext({} as IContextProps);

export const AppStateProvider = ({ children }) => {

  const [state, dispatch] = useReducer(appReducer, {
    user: null,
    notifications: [],
  });

  return <AppContext.Provider value={{ state, dispatch }}>{children}</AppContext.Provider>;
};

Then register the AppStateProvider at your app root

// ~/pages/_app.tsx
import { StateProvider } from "~/lib/store";

export default function App({ Component, pageProps }) {
  return (
    <AppStateProvider>
      <Component {...pageProps} />
    </AppStateProvider>
  );
}

Then usage will look like this

// ~/pages/index.tsx
import React, { useContext, useState } from "react";

export default function HomePage() {
  const { state, dispatch } = useContext(AppContext);
  const [form, setForm] = useState({ name: "", email: "" });

  function onChange(ev: React.FormEvent<{}>) {
    const target = ev.target as HTMLInputElement;
    const value = target.type === "checkbox" ? target.checked : target.value;
    const name = target.name;
    setForm((v) => ({ ...v, [name]: value }));
  }
  function login(ev: React.FormEvent<HTMLFormElement>) {
    ev.preventDefault();

    if (Object.values(form).every(Boolean)) {
      dispatch({ kind: "user", payload: form });
    } else {
      alert("Please fill the form well");
    }
  }
  return (
    <div>
      {state.user ? (
        <div>
          <hi>Welcome {state.user?.name}</hi>
        </div>
      ) : (
        <div>
          <h1>Login</h1>
          <form action="" method="post" onSubmit={login}>
            <section>
              <label htmlFor="name">Name</label>
              <div>
                <input name="name" id="name" value={form.name} onChange={onChange} />
              </div>
            </section>
            <section>
              <label htmlFor="email">Email</label>
              <div>
                <input name="email" id="email" value={form.email} onChange={onChange} />
              </div>
            </section>
            <button>Login</button>
          </form>
        </div>
      )}
    </div>
  );
}

And also know that the dispatch state key kind is well-typed

The end!.
I hope this helps.