Forem

Cover image for Render bare-bones React app as HTML in Tino
Marko Jakic
Marko Jakic

Posted on

1

Render bare-bones React app as HTML in Tino

Recently I've published Tino functional HTTP server for Deno, and you can read a short overview about it here.

This time I would like to show how you can easily render HTML content using middlewares.

Middlewares in Tino are composition of functions which whatever they return is passed through until your controller receives it.

Using Deno's TextDecoder and readFile top level APIs and Tino's withMiddlewares helper for composing middlewares you can write a simple endpoint definition in the following manner: (for example app.js file)

// app.js
const htmlReader = async () => {
  const decoder = new TextDecoder("utf-8");
  const html = await Deno.readFile("./react.html");
  return { html: decoder.decode(html) };
}

const composedReact = withMiddlewares(htmlReader);
const useHTML = composedReact(({ html }) => ({ resp: html, type: "text/html" }));

app.get(() => ({ path: "/react", use: useHTML }));
Enter fullscreen mode Exit fullscreen mode

Now you need to create your React app as a website somewhere. I won't be using JSX here for simplicity but only React's createElement. Let's say you have your boilerplate saved in ./react.html file (same directory as your app.js file). Have a look at sample content below. All it does is handling "Inc" button and logging incremented value to the console:

<html>

<head>
  <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
</head>

<body>
  <div id="root"></div>
  <script>
    const e = React.createElement;
    const domContainer = document.querySelector('#root');
    const IncButton = () => {
      const [incrementedValue, inc] = React.useState(0);
      return e(
        'button',
        {
          onClick: () => {
            inc(incrementedValue + 1);
            console.log(incrementedValue);
          }
        },
        'Inc'
      );
    };
    ReactDOM.render(e(IncButton), domContainer);
  </script>
</body>

</html>
Enter fullscreen mode Exit fullscreen mode

Now when you target http://localhost:8000/react you should see your React app running in the browser.

Hope you liked this post and how using middlewares you can process pretty much anything in Tino and write your own.

Cheers! 🍻

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay