@asyarb/vite-plugin-ssr-nojs

v0.1.2

Published

2 years ago

Vite plugin for authoring static HTML with your favorite JS libraries and frameworks.

Downloads

0High
0Medium
0Low

asyarb

Vite Plugin SSR No JS

A simple Vite plugin to use your preferred JS library as a templating language for static HTML. This plugin will render your provided app as a series of .html files with no JavaScript included.

This plugin's purpose is to provide a modern DX (components, fast hot-reloading, css/asset management, etc.) for authoring basic HTML files, and is not intended for use in large production projects.

Installation

# yarn
yarn add -D @asyarb/vite-plugin-ssr-nojs

# npm
npm i -D @asyarb/vite-plugin-ssr-nojs

Usage

Add the plugin to your Vite config file. See comments for additional information regarding options to pass the plugin.

// vite.config.ts
import * as path from 'path'
import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import { ssrNoJsPlugin } from '@asyarb/vite-plugin-ssr-nojs'

export default defineConfig({
  plugins: [
    reactRefresh(),
    ssrNoJsPlugin({
      // An absolute path to a file that renders your app in a server-side
      // context (e.g. ReactDOMServer.renderToStaticMarkup)
      renderModulePath: path.resolve(__dirname, 'src/entry-server.tsx'),

      // An absolute path to the output directory of your vite builds.
      viteOutputPath: path.resolve(__dirname, 'dist'),

      // A list of routes to statically render. Can be a static array or a
      // function that returns an array of routes.
      routes: ['/', '/about'], // routes: async () => ['/', '/about']

      // A static string that will be used as the injection point for your
      // server-rendered HTML. Default: `<!--ssr-html-->`.
      htmlInjectionString: '<!--ssr-html-->',
    }),
  ],
})

Setup the file specified in renderModulePath. The example below uses React and React Router, but any framework that can render to a string will work.

// src/entry-server.tsx
import * as React from 'react'
import * as ReactDOMServer from 'react-dom/server'
import { StaticRouter } from 'react-router-dom/server'

import { App } from './App'

// Your renderable module must export a function called `render` that
// receives the current `route` as a paramter.
export function render(route: string) {
  return ReactDOMServer.renderToStaticMarkup(
    <StaticRouter location={route}>
      <App />
    </StaticRouter>
  )
}

// src/App.tsx
// Imports condensed for brevity.
export const App = () => {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<AboutPage />} />
    </Routes>
  )
}

Add your htmlInjectionString to your index.html file. This will be replaced with your app's SSR HTML at build time.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/src/assets/favicon.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite App</title>
  </head>
  <body>
    <div id="app"><!--ssr-html--></div>

    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

Run vite build and vite dev as you normally would. On builds, your statically generated HTML files will be available in vite's output directory.

Limitations

TODO, but here's the upshot:

JS is completely removed, so any runtime behavior in your app will not run.

License

MIT.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

Vite Plugin SSR No JS

Installation

Usage

Limitations

License