https://github.com/cmorten/deno-react-base-server

Minimal React SSR Base Server in Deno.
https://github.com/cmorten/deno-react-base-server

deno deno-module deno-react-base-server denoland poc react

Last synced: 2 months ago
JSON representation

Minimal React SSR Base Server in Deno.

• Host: GitHub
• URL: https://github.com/cmorten/deno-react-base-server
• Owner: cmorten
• Created: 2020-05-15T12:44:42.000Z (over 4 years ago)
• Default Branch: main
• Last Pushed: 2024-01-28T09:47:20.000Z (11 months ago)
• Last Synced: 2024-10-04T13:38:27.468Z (3 months ago)
• Topics: deno, deno-module, deno-react-base-server, denoland, poc, react
• Language: TypeScript
• Size: 31.3 KB
• Stars: 17
• Watchers: 4
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# deno-react-base-server

Minimal React SSR Base Server in Deno.

> As featured in [Open JS World 2020](https://www.youtube.com/watch?v=doug6st5vAs).

Please use this as an a small demo of how you _could_ write a React SSR application in Deno, and as a useful utility for quickly rendering any React component with SSR. For a walk-through check out [this article](https://dev.to/craigmorten/writing-a-react-ssr-app-in-deno-2m7).

This server uses the [Opine](https://github.com/asos-craigmorten/opine) web framework for Deno.

**Recommendation**: For a more complex / better React SSR example using bundling, check out the [React example](https://github.com/asos-craigmorten/opine/tree/main/examples/react) on the Opine project.

## Usage

### Using the module

You can use `deno-react-base-server` as an imported module through the [mod.ts](./mod.ts) module.

Write your React application and export the top level component as the _default export_:

```tsx

import React from "https://dev.jspm.io/[email protected]";

declare global {

  namespace JSX {

    interface IntrinsicElements {

      button: any;

      div: any;

      h1: any;

      p: any;

    }

  }

}

const App = () => {

  const [count, setCount] = React.useState(0);

  return (

    


      
Hello DenoLand!

       setCount(count + 1)}>Click the 🦕

      
You clicked the 🦕 {count} times

    

  );

};


/**

 * Export the component as the _default export_.

 */

export default App;

```

Then create an entrypoint script to run your React application on a specified port:

```tsx

// Import deno-react-base-server

import baseServer from "https://raw.githubusercontent.com/asos-craigmorten/deno-react-base-server/main/mod.tsx";

// Update `appModulePath` from the example React component to your own.

baseServer({

  appModulePath:

    "https://raw.githubusercontent.com/asos-craigmorten/deno-react-base-server/main/example/app.tsx",

  port: 3000,

});

```

Where `appModulePath` is the path to your app component module. This can be any path that Deno's import supports, i.e. relative / absolute file path, URL etc.

Then you can run your application using the Deno `run` command and passing the path to your entrypoint script. For example:

```console

deno run --allow-net --allow-read "https://raw.githubusercontent.com/asos-craigmorten/deno-react-base-server/main/example/entrypoint.ts"

```

### Using the CLI

You can also use the [cli.ts](./cli.ts) module to run your React application direct from the command line.

For example, to start the example application in this repo on port 3000 we run the [cli.ts](./cli.ts) module and pass the port and path to our top-level React component module as flags.

```console

deno run --allow-net --allow-read "https://raw.githubusercontent.com/asos-craigmorten/deno-react-base-server/main/cli.ts" --port 3000 --path "https://raw.githubusercontent.com/asos-craigmorten/deno-react-base-server/main/example/app.tsx"

```

**Note:** As with the [module](#using-the-module) usage, the top-level React component module provided to the `--path` flag must be exported as the _default export_.

## Supported Deno Versions

This project has been tested with the following versions:

- 1.2.2

Once Deno is installed, you can easily switch between Deno versions using the `upgrade` command:

```bash

# Upgrade to latest version:

deno upgrade

# Upgrade to a specific version, replace `` with the version you want (e.g. `1.0.0`):

deno upgrade --version 

```