Guide to server-side rendering with Deno and React

• deno

  448 92,841 9.9 Rust

  A modern runtime for JavaScript and TypeScript.

  

  // frontend/ssr/server.tsx import { Application, Router } from 'https://deno.land/x/[email protected]/mod.ts'; import { React, ReactDOMServer, StaticRouter, } from "../dep.ts"; import App from "../components/App.tsx"; const app = new Application(); const port: number = 8000; const jsBundlePath = "/main.js"; const { diagnostics, files } = await Deno.emit("./ssr/client.tsx", { bundle: "esm", compilerOptions: { lib: ["dom", "dom.iterable", "esnext"] }, }); console.log(diagnostics); const router = new Router(); router .get("/", (context) => { const app = ReactDOMServer.renderToString( StaticRouter> ); context.response.type = "text/html"; context.response.body = ` Sanity <-> Deno ${app} `; }) .get(jsBundlePath, (context) => { context.response.type = "application/javascript"; context.response.body = files["deno:///bundle.js"]; }); app.addEventListener("error", (event) => { console.error(event.error); }); app.use(router.routes()); app.use(router.allowedMethods()); app.listen({ port }); console.log(`Server is running on port ${port}`);

• sanity-deno

  1 4 0.0 JavaScript

  The complete source code for the application built in this tutorial can be found here on GitHub. Happy coding!

• SurveyJS

  surveyjs.io

  sponsored

  Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

  

• Tailwind CSS

  1,275 78,166 9.4 TypeScript

  A utility-first CSS framework for rapid UI development.

  

  In this tutorial, we will build a movie application to show some bestselling movies and A-list actors. Sanity.io will be used for the backend to manage contents, which includes creating, editing, and updating data for the project. While Deno and React will be used for the front end and server-side rendering respectively. Tailwind CSS will be used to style the application UI.

• Koa

  71 34,829 5.4 JavaScript

  Expressive middleware for node.js using ES2017 async functions

  

  For our Deno server, we are using the Oak middleware framework, which is a framework for Deno's HTTP server. It is similar to Koa and Express and the most popular choice for building web applications with Deno. In server.tsx, add the following code:

• Express

  671 63,725 7.6 JavaScript

  Fast, unopinionated, minimalist web framework for node.

  

  For our Deno server, we are using the Oak middleware framework, which is a framework for Deno's HTTP server. It is similar to Koa and Express and the most popular choice for building web applications with Deno. In server.tsx, add the following code:

• InfluxDB

  www.influxdata.com

  sponsored

  Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

  

Suggest a related project