DEV Community: sadnessOjisan

Let's create simple echo server with Vercel and TypeScript

sadnessOjisan — Tue, 09 Mar 2021 17:23:01 +0000

Vercel is a hosting service for web development. This also provides us some functions which are able to be used as a server.

This post is about how to deploy a simple echo server with TypeScript. The code is here.

Install required modules.

The libraries are typescript and @vercel/node.

npm i -D typescript @vercel/node

@vercel/node provides me typing to use typescript on vercel. Vercel functions endopoint require us some kind of rules. We must obey the rule and typings.

Write functions

import { NowRequest, NowResponse } from "@vercel/node";

// request -> ?id={your_id}
export default async (req: NowRequest, res: NowResponse) => {
  const { query } = req;
  const { id } = query;
  res.json({ id });
};

req and res is typed by @vercel/node.

Put the code to api/

If you put the code into /api/, vercel serve this as a serverless function endpoint.

The point is the directory is not /pages/api/. If you know NextJS, you know Next.js treats /pages/api as serverless functions endpoint. This endpoint is called "API Routes" as Next.js's term.

Sometimes "Vercel Serverless Functions" and "API Routes" are confused. Because those have the same feature but the usage is different.

Now we only use Vercel Serverless Function, so we just put this file to /api/

Deploy

Push to GitHub and connect the repository to Vercel. After that, access "*.vercel.app/api/${function_name}?id=hoge", you will get response 'hoge'.

What should I prepare for installable Web Application

sadnessOjisan — Fri, 05 Mar 2021 17:27:33 +0000

As you know, now we can create an installable web application as PWA. And I think you already know how to create it. "Write manifest.json". But sometimes I forget what is the correct configure. This post is for the problem.

SUMMARY: Just solve-all warnings in your developer tools.

All you should do is written there.

What is correct manifest.json

If you want to make an installable PWA, you must write a manifest.json. But I think you would already experience that although you write a manifest.json, the web application didn't become installable. The reason would be you wrote the wrong configure.

How can I write a correct manifest.json. The method is just obeying Developer Tools. If you write the wrong config, the Developer Tools teach me how to fix it.

My Real Workflow

From now I will change this Web app to Installable PWA. (Sorry, this app is written in Japanese, but the contents are not important. Don't worry.)

(merged PR is here)

Create from empty manifest file

Ok, let's prepare an empty config file.

{}

and load this to HTML.

<link rel="manifest" href="manifest.json" />

Then open the application. You will see this warning.

The warning is ...

Manifest start URL is not valid
Manifest does not contain a name or short_name field
Manifest display property must be one of standalone fullscreen or minimal-ui.
Manifest doesn't contain a suitable icon -PNG, SVG or WebP format of at least 144px is required, the sizes attribute must be set, and the purpose attribute, if set, must include any or maskable.
No matching service worker detected. You may need to reload patge, or check that the scope of the service worker for the current page encloses the scope and start URL from the manifest.
No supplied icon is at least 144px square in PNG, SVG or WebP format

Let's configure

Set start URL

{
  "start_url": "https://birthstone.web.app/",
}

Set Name

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone"
}

Set display property.

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone", 
  "display": "standalone"
}

Set icon property and prepare image.

{
  "start_url": "https://birthstone.web.app/",
  "name": "birthstone", 
  "display": "standalone",
  "icons": [
      {
        "src": "/icon-192x192.png",
        "sizes": "192x192",
        "type": "image/png"
      },
   ]
}

Prepare service worker.

<!-- index.html -->
<script>
  if ("serviceWorker" in navigator) {
    navigator.serviceWorker
      .register("sw.js")
      .then(function (registration) {
        console.log("success load");
      })
      .catch(function (err) {
        console.log(err);
      });
   }
</script>

// @sw.js
self.addEventListener("fetch", function (event) {});

And Deploy it...

Totally Get the App.

(Sorry, this is Japanese. The meaning is "Please select install or not")

Summary

Please check Developer Tools. All you should do is written in Application tab.
Write a manifest.json, sw.js and load it to index.html.

Deploy Anywhere Next.js app using SSG and Dynamic routing

sadnessOjisan — Wed, 24 Feb 2021 10:50:25 +0000

SSG stands for Static Site Generation and Next.js recommend it officially. When I look at this term first, I thought "it generates just a simple HTML, I can deploy it anywhere". But that was a misunderstanding.

I can't handle it as simple HTML

The reason is <Link> tag. If you click <Link href-"about">about</Link>, It navigates you to /about. Not /about.html. That's why In some cases, this routing resource may not be there if you didn't deploy it to so kindful infrastructure(for example Vercel). That's why if you reload this URL, you can't get any resources. No page is shown. In many cases, if you want to open this page directly, you should rewrite URL routing to *.html.

rewrite for Dynamic routing

The above problem is solved if you write rewrite config. For example

/about -> /about.html
/me -> /me.html

But how do you write a dynamic HTML page's route config? NextJS can generate a page and URL at build time depends on some outer resources(for example API). The URL will be like /user/1, /user/posts/1, and so on. If you know all endpoints and data, you may be able to write all. But this is so hard and in many cases impossible.

Naive Solutions

If you deploy to good infrastructure, they may provide some config to rewrite dynamic URL. For example netlify.toml, firebase functions, lambda and cloud front, amplify console and so on.

But this solution depends on your environment and a little difficult. How can I deploy it anywhere easily?

Solution: Use trailingSlash config

The simple solution is just to use trailingSlash in next.config.js.

 trailingSlash: true,

https://nextjs.org/docs/api-reference/next.config.js/exportPathMap#adding-a-trailing-slash

That's all! This navigates to *.html when you click Link. Then you can treat your SSG site as a simple static website. You can deploy it anywhere.

Hide "No file chosen" of input elements (type="file")

sadnessOjisan — Tue, 02 Feb 2021 20:32:00 +0000

If you create file input elements,



<input type="file" />

you will see

This "No file chosen" is sometimes bothering for design. Let's hide it.

Needs Dom manipulation?

If you investigate how to hide this, you will find a solution using jQuery.

FYI: https://stackoverflow.com/questions/12035400/how-can-i-remove-the-no-file-chosen-tooltip-from-a-file-input-in-chrome



input[type='file'] {
  opacity:0    
}



<div>
    <input type='file'/>
    <span id='val'></span>
    <span id='button'>Select File</span>
</div>



$('#button').click(function(){
   $("input[type='file']").trigger('click');
})

$("input[type='file']").change(function(){
   $('#val').text(this.value.replace(/C:\\fakepath\\/i, ''))
})

But If you use React, Vue, and so on, How do you do it? The simple solution is just to use CSS.



input[type='file'] {
  color: rgba(0, 0, 0, 0)
}

The point is, not to use opacity but use color. If you use opacity, the input button also disappears.

Those are examples.

[NextJS] smooth routing when SSR

sadnessOjisan — Thu, 28 Jan 2021 00:58:15 +0000

heavy SSR makes TTFB longer

In NextJS, the heavy getServerSideProps method freeze user transition. For example, If sleep 5sec in getServerSideProps, the user need wait 5 sec after clicking a link.

import Link from "next/link";

export default () => {
  return <Link href="about">heavy about</Link>;
};

export default (props) => {
  return <div>this is about page: {props.id}</div>;
};

export async function getServerSideProps(context) {
  await sleepByPromise(5);
  return {
    props: { id: 1 }, // will be passed to the page component as props
  };
}

function sleepByPromise(sec) {
  return new Promise((resolve) => setTimeout(resolve, sec * 1000));
}

Here is bad UX demo. You should wait 5 sec after clicking a link. This will be bad experience for user.

solution: use router.change

NextJS has a Router.event('eventName', ()=>{}) method. This method can handle events of routing change. Especially "routeChangeStart" can handle the start point of change routing. Then if you toggle state which manages to show loading or not, you can show loader.

import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect, useState } from "react";

export default () => {
  const [isLoading, setLoadingState] = useState(false);
  const router = useRouter();
  useEffect(() => {
    router.events.on("routeChangeStart", (url) => {
      setLoadingState(true);
    });
  }, []);
  return isLoading ? (
    <div
      style={{
        background: "rgba(0,0,0,0.8)",
        color: "white",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        fontSize: 32,
        position: "fixed",
        top: 0,
        left: 0,
        width: "100vw",
        height: "100vh",
      }}
    >
      <marquee>loading</marquee>
    </div>
  ) : (
    <Link href="about">heavy about</Link>
  );
};

here is demo.

soure code

https://github.com/ojisan-toybox/next-js-routing-inidicator

Create loading indicator without css animation

sadnessOjisan — Wed, 27 Jan 2021 17:27:59 +0000

just use marquee.

<div
  style={{
    background: "rgba(0,0,0,0.8)",
    color: "white",
    display: "flex",
    justifyContent: "center",
    alignItems: "center",
    fontSize: 32,
    position: "fixed",
    top: 0,
    left: 0,
    width: "100vw",
    height: "100vh",
  }}
>
  <marquee>loading</marquee>
</div>;

here is demo.

hooray🎉

storybook with preact + TS + goober

sadnessOjisan — Tue, 26 Jan 2021 18:30:40 +0000

fail setup storybook

Create a component with preact, TS and goober.

import { h } from "preact"
import { styled } from "goober"

const _Button = styled("button")`
  background-color: red;
`

export const Button = () => {
  return <_Button>ok</_Button>
}

Next, create the storybook's story.

npx sb init

import { h } from "preact"
import { Button } from "./button"

export default {
  title: "custom/Button",
  component: Button,
  argTypes: {
    backgroundColor: { control: "color" },
    onClick: { action: "onClick" },
  },
}

const Template = (args: any) => <Button {...args} />

export const Primary = Template.bind({})

And start this.

npm run storybook

Let's look at this story. You will see this fail view.

h is not defined
ReferenceError: h is not defined
    at Object.Template (http://192.168.0.3:6006/main.4bde6a78d76d85c8a393.bundle.js:353:3)
    at finalStoryFn (http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:16622:32)
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:13062:21
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:14861:14
    at wrapper (http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:12801:12)
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:13580:14
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:13594:26
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:13062:21
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:14854:12
    at http://192.168.0.3:6006/vendors~main.4bde6a78d76d85c8a393.bundle.js:14861:14

On the other hand, generated story files by npx sb init are successful.

Why is this example success, is My story fail to view.

Let's look at Success Component

Firstly, preact is supported by the storybook official.

FYI: https://www.npmjs.com/package/@storybook/preact

That's why we can generate example preact story files by npx sb init.Let's look at this component.

/** @jsx h */
import { h } from "preact"
import PropTypes from "prop-types"
import "./button.css"

/**
 * Primary UI component for user interaction
 */
export const Button = ({ primary, backgroundColor, size, label, ...props }) => {
  const mode = primary
    ? "storybook-button--primary"
    : "storybook-button--secondary"
  return (
    <button
      type="button"
      className={["storybook-button", `storybook-button--${size}`, mode].join(
        " "
      )}
      style={backgroundColor && { backgroundColor }}
      {...props}
    >
      {label}
    </button>
  )
}

Button.propTypes = {
  /**
   * Is this the principal call to action on the page?
   */
  primary: PropTypes.bool,
  /**
   * What background color to use
   */
  backgroundColor: PropTypes.string,
  /**
   * How large should the button be?
   */
  size: PropTypes.oneOf(["small", "medium", "large"]),
  /**
   * Button contents
   */
  label: PropTypes.string.isRequired,
  /**
   * Optional click handler
   */
  onClick: PropTypes.func,
}

Button.defaultProps = {
  backgroundColor: null,
  primary: false,
  size: "medium",
  onClick: undefined,
}

There are some different points between my components.

not TS, but JS.
jsx pragma in first line.
not use CSS in JSS, but use plain CSS

Those points are just the reason why my story doesn't work.

need config jsx factory

what is /** @jsx h */

This is called a jsx pragma.it tells jsx factory to the compiler. For example, react's jsx factory is createElement, preact's jsx factory is h, but the compiler doesn't know it.

story book builds a source by babel

If you use TypeScript Compiler to build an application, the storybook builds a story by babel. That's why you must config about jsx factory to the babel config file.

module.exports = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
  babel: async options => ({
    ...options,
    presets: [["@babel/typescript", { jsxPragma: "h" }]],
  }),
}

Otherwise, you should write jsx pragma in your story file.

goober needs init

Goober is a CSS in JS library.This needs a setup to run the application for the first time.

import { setup } from "goober"
import { h, render } from "preact"
import { Button } from "./button"

setup(h)

const App = () => {
  return (
    <div>
      <Button></Button>
    </div>
  )
}

render(<App></App>, document.body)

But story book's file doesn't read this entry point. That's why each story file needs setup(h).

import { setup } from "goober"
import { h } from "preact"
import { Button } from "./button"

setup(h)

export default {
  title: "custom/Button",
  component: Button,
  argTypes: {
    backgroundColor: { control: "color" },
    onClick: { action: "onClick" },
  },
}

const Template = (args: any) => <Button {...args} />

export const Primary = Template.bind({})

it works!!

Start storybook after config jsx factory to babel config file and setup goober each story file.

npm run storybook

Success!!

Source code is here.

https://github.com/ojisan-toybox/preact-storybook