Skip to content

denis-ok/rescript-ssg

Repository files navigation

rescript-ssg

rescript-ssg is ReScript library to build static websites with React (rescript-react).

Features and basic info

  • Simple. Everything is explicit and passed via function arguments.
  • Designed to work with bs-css/bs-emotion.
  • Designed to work with ES modules projects.

How it works?

  1. You create a separate React components for your pages.
  2. rescript-ssg renders HTML templates and creates ReScript-React app files from page components.
  3. New ReScript files are feed to ReScript compiler.
  4. Webpack consumes rendered HTML + complied file to create a bundle per page and collect static assets.

Installation

npm install --save-dev rescript-ssg

Add rescript-ssg to bs-dependencies in your bsconfig.json:

{
  "bs-dependencies": [
    "rescript-ssg",
  ],
}

Basic usage

  1. Create Index.res page component:
@react.component
let make = () => {
  <h1> React.string "Hello from index page" </h1>
}

// This helper call gets a filepath of this module
let modulePath = RescriptSsg.Utils.getFilepath()
  1. Create Pages.res file where we'll define our pages array:
let currentDir = RescriptSsg.Utils.getDirname()

let outputDir = RescriptSsg.Path.join2(currentDir, "../build")

let index: RescriptSsg.PageBuilder.page = {
  hydrationMode: FullHydration,
  pageWrapper: None,
  component: ComponentWithoutData(<Index />),
  modulePath: Index.modulePath,
  headCssFilepaths: [],
  path: Root,
  globalValues:⋅None,
  headScripts:⋅[],
  bodyScripts:⋅[]
}

let pages = [index]
  1. Create Build.res file. We'll pass this file to rescript-ssg binary to perform build.
let currentDir = RescriptSsg.Utils.getDirname()

let () = RescriptSsg.Commands.build(
  ~mode=Production,
  ~outputDir=Pages.outputDir,
  ~logLevel=Info,
  ~compileCommand=Path.join2(currentDir, "../node_modules/.bin/rescript"),
  ~pages=Pages.pages,
  ~webpackBundleAnalyzerMode=Some(Static({reportHtmlFilepath:⋅"webpack-bundle/index.html"})),
  ~minimizer=Terser,
  ~globalEnvValues=[],
  ~buildWorkersCount=32
  (),
)
  1. Create Start.res file. We'll pass this file to rescript-ssg binary to start dev mode.
let () = RescriptSsg.Commands.start(
  ~devServerOptions={listenTo: Port(9000), proxy: None},
  ~mode=Development,
  ~globalEnvValues=Pages.globalEnvValues,
  ~webpackBundleAnalyzerMode=None,
  ~outputDir=Pages.outputDir,
  ~logLevel=Info,
  ~pages=Pages.pages,
  (),
)
  1. Make sure you have "type": "module" in package.json and update scripts field:
{
  "type": "module",
  "scripts": {
    "build-rescript-ssg": "rescript-ssg src/Build.bs.js",
    "start-rescript-ssg": "rescript-ssg src/Start.bs.js"
  },
}
  1. Update the sources field in bsconfig.json. We need to add outputDir there to compile intermediate React App files generated by rescript-ssg:
{
  "sources": [
    {
      "dir": "build",
      "type" : "dev",
      "subdirs": true
    }
  ],
}
  1. Finally, we can run commands.
  • To start development mode: Start ReScript compiler in a watch mode in the first terminal tab. Then run in a second tab:
npm run start-rescript-ssg
  • To build pages:
npm run build-rescript-ssg
  1. After successfull build you'll see two directories in your specified output dir: public and temp. public dir is what you want to serve. It contains a bundle and static assets.

Releases

No releases published

Packages

No packages published