Rescript React static site generator
npm install rescript-ssgrescript-ssg is ReScript library to build static websites with React (rescript-react).bs-css/bs-emotion.rescript-ssg renders HTML templates and creates ReScript-React app files from page components.``bash`
npm install --save-dev rescript-ssg
Add rescript-ssg to bs-dependencies in your bsconfig.json:
`json`
{
"bs-dependencies": [
"rescript-ssg",
],
}
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.