https://github.com/denis-ok/rescript-ssg

static site generator
https://github.com/denis-ok/rescript-ssg

Last synced: 2 months ago
JSON representation

static site generator

• Host: GitHub
• URL: https://github.com/denis-ok/rescript-ssg
• Owner: denis-ok
• Created: 2022-02-22T07:14:16.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-09-21T12:29:48.000Z (4 months ago)
• Last Synced: 2024-10-15T02:27:16.783Z (3 months ago)
• Language: Reason
• Homepage: https://rescript-ssg.vercel.app
• Size: 1.65 MB
• Stars: 12
• Watchers: 2
• Forks: 3
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md

Awesome Lists containing this project

README

        
# 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 = {

  hydrationMode: FullHydration,

  pageWrapper: None,

  component: ComponentWithoutData(),

  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.

```rescript

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.

```rescript

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:

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