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()

2. 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]

3. 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
  (),
)

4. 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,
  (),
)

5. 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"
  },
}

6. 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
    }
  ],
}

7. 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

8. 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.