Simple project template with dev server?

1

Is there a project template out there that will let me run a dev server without much thought?

I see there’s a next.js template, great, but is there a simpler template that does tell you exactly how to start a dev server but with lighter dependencies? Following the official rescript-react install docs seems to take me to “I’ve compiled a thing” but not quite to “I have a web page I can look at locally”.

I copied over the old moduleserver.js and added moduleserve as a dev dependency and for whatever reason it didn’t work first time, it’s probably some silly thing I’ve missed but I’d rather do some work on my project than debug that.

2 Likes
2

You can use Vite pretty much without any config. Add index.html to the root folder, add <script src=“Your.bs.js”… And run vite serve.

2 Likes
3

Thanks. Since I rarely do this, I tripped over a few things (“everything else is comparatively easy” as K&R wrote).

Would be great if somebody maintained a template oriented at getting started quickly for local playing around with minimal boilerplate, but here’s what I did (sorry, I realize some of this is redundant):

I followed the rescript react install docs, ending up with the following in my Test.res file:

// src/Test.res
@react.component
let make = () => {
    <div> {React.string("Hello World")} </div>
}

// Dom access can actually fail. ReScript
// is really explicit about handling edge cases!
switch(ReactDOM.querySelector("#root")){
    | Some(root) => ReactDOM.render(<div> {React.string("Hello Andrea")} </div>, root)
    | None => () // do nothing
}

then I did this:

npm install --save-dev vite
npm install --save-dev @vitejs/plugin-react-refresh
npm install --save react
npm install --save react-dom

I made my package.json have a scripts section like this:

  "scripts": {
    "build": "rescript",
    "clean": "rescript clean -with-deps",
    "start": "rescript build -w",
    "dev": "vite"
  },

I made an index.html at top level like this:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ReScript Hello World</title>
    </head>
    <body>
        <script type="module" src="/src/Test.bs.js"></script>
        <p>Hello world</p>
        <div id="root"/>
    </body>
</html>

In bsconfig.json I changed package-specs to look like this:

  "package-specs": {
    "module": "es6-global",
    "in-source": true
  },

And created a file named vite.config.js at top level with this content:

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh()],
  clearScreen: false
})

Then I ran this:

npm run dev

And then visited the URL in my browser that vite printed, showing “Hello Andrea” (who’s that?) from the Test.res file shown in the Rescript install docs.

2 Likes