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

``bash
npm install --save-dev rescript-ssg
`

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

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

Basic usage


1. Create Index.res page component:

`rescript
@react.component
let make = () => {


React.string "Hello from index page"

}

// 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:

`rescript
let currentDir = RescriptSsg.Utils.getDirname()

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

let index: RescriptSsg.PageBuilder.page = {
pageWrapper: None,
component: ComponentWithoutData(),
modulePath: Index.modulePath,
headCssFilepaths: [],
path: Root,
}

let pages = [index]
`

3. Create Build.res file. We'll pass this file to rescript-ssg binary to perform build.

`rescript
let currentDir = RescriptSsg.Utils.getDirname()

let () = RescriptSsg.Commands.build(
~mode=Production,
~outputDir=Pages.outputDir,
~logLevel=Info,
~rescriptBinaryPath=Path.join2(currentDir, "../node_modules/.bin/rescript"),
~pages=Pages.pages,
(),
)
`

4. Create Start.res file. We'll pass this file to rescript-ssg binary to start dev mode.

`rescript
let () = RescriptSsg.Commands.start(
~devServerOptions={listenTo: Port(9000), proxy: None},
~mode=Development,
~outputDir=Pages.outputDir,
~logLevel=Info,
~pages=Pages.pages,
(),
)
`

5. Make sure you have "type": "module" in package.json and update scripts field:

`json
{
"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:

`json
{
"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:

`bash
npm run start-rescript-ssg
`

- To build pages:

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