What step is needed after installation and build of ReScript/React to make it load in browser?

,
1

The manual says:

Now run npx rescript and you should see a successful build.

Buuut of course that’s not enough to make it load in the browser. :slight_smile: Can anyone help with which package manager is best here, and how to set it up? Preferably with hot reload… :pray:

I also added a comment about this on the manual commit in Github.

Edit: Or maybe it’s easier to go the other way around and start a vanilla React app first…? Will try. https://github.com/facebook/create-react-app

2

Hello, I’m using vitejs to dev and build my app. Works like a charm, you should give it a try. Pretty straight forward to setup a dev environment.
I saw an article, posted recently on the forum, about using rescript + vite.
Hope it helps :wink:

PS: My ever-growing rescript article series - #43 by dusty-phillips

3

I’ll try that, thanks!

4

Hm, got this error when following your blog post:

error An unexpected error occurred: “https://registry.yarnpkg.com/@rescrip%2F-react: Not found”.

This seems to work tho:

npm install @rescript/react --save

5

Nope, still stuck lol

6

Trying basic webpack config now, to get a bundle to include in my legacy PHP app I’m working on…

7

Using this (very) basic webpack config works to build a dist file I can use. Phew.

const HtmlWebpackPlugin = require('html-webpack-plugin');

const port = process.env.PORT || 3000;

module.exports = {
    entry: './src/Test.bs.js',
    output: {
        filename: 'bundle.[fullhash].js'
    },
};
8

I’ve been using Vite for a while now if you want to take a stab at getting it working again. I haven’t had a broken build due to tooling since switching to Vite, unlike CreateReactApp’s flakiness. My vite.config.js is really lean:

import { defineConfig } from 'vite';
import reactRefresh from '@vitejs/plugin-react-refresh';
import svgr from 'vite-plugin-svgr';
import createReScriptPlugin from '@jihchi/vite-plugin-rescript';

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [reactRefresh(), svgr(), createReScriptPlugin()],
});

I can build the app for distribution with yarn vite build, and start a hot-module reloading dev server with yarn start.

My NPM dependencies:

"vite": "2.9.9",
"@jihchi/vite-plugin-rescript": "2.1.0",
"@vitejs/plugin-react-refresh": "1.3.6",
"vite-plugin-svgr": "2.1.0",
1 Like
9

For hot reload, I ran these two commands in two different terminals:

npx rescript build -w

and

./node_modules/webpack/bin/webpack.js

but with watch: true set in webpack.config.js.

Works pretty well with screen/tmux, where the compiler can be in a split window to see errors etc. :slight_smile:

10

Yeah, I love tmux for that too- I have a whole pane just showing type errors that I need to chase down.

11

IIRC, people either use nextjs to drive webpack with react fast refresh utilities configured for you or use vite.

12

Yeah, there are other more basic bash tools that can listen for changes too.