This is a NextJS based website for Rescript Uzbekistan with following setup:
- Full Tailwind v3 config & basic css scaffold (+ production setup w/ purge-css & cssnano)
- ReScript + Core + React
- Some ReScript Bindings for Next to get you started
- Preconfigured Dependencies:
@rescript/react
Note: This setup is based on the v1
package-lock
format utilized by npm@6
. If you want to use the newer v2
version, delete the package-lock.json
file and install the dependencies with npm@7
.
# Set Node version to latest
volta install node@lts
# Use pnpm preferably
volta install pnpm
# You may installer rescript globally
volta install rescript
# Install dependencies using pnpm
pnpm install
Run ReScript in dev mode:
npm run res:dev
In another tab, run the Next dev server:
npm run dev
Build CSS seperately via postcss
(useful for debugging)
# Devmode
npx postcss styles/main.css -o test.css
# Production
NODE_ENV=production npx postcss styles/main.css -o test.css
# Make sure to uncomment the `target` attribute in `now.json` first, before you run this:
npm run build
PORT=3001 npm start
This template is complying to the ES6 module format, and therefore compiles ReScript code to mjs
files. In case you want to use this template with the old commonjs
format, do the following changes:
- Set
package-specs
andsuffix
to the following configuration:
{
//...
"package-specs": {
"module": "commonjs",
"in-source": true
},
"suffix": ".res.js"
}
- Replace all import paths in
pages
that refer tosrc/MyResFile.res.mjs
tosrc/MyResFile.res.js
// pages/_app.js
-import ResApp from "src/App.res.mjs"
+import ResApp from "src/App.res.js"
Done. You are now running on commonjs modules.
We ship some general bindings for NextJS
, but we try to keep them simple. Some use-cases and APIs might not be reflected yet, so feel free to adapt the file as you see fit for your app.
As with every file fork, if you keep the changes git trackable, it's pretty straight-forward to pull in upstream changes later on.
Make sure to create interface files (.resi
) for each page/*.res
file.
Fast Refresh requires you to only export React components, and it's easy to unintenionally export other values that will disable Fast Refresh (you will see a message in the browser console whenever this happens).
For the 100% "always-works-method", we recommend putting your ReScript components in e.g. the src
directory, and re-export them in plain pages/*.js
files instead (check out the templates initial pages
directory to see how we forward our React components to make sure we fulfill the Fast-Refresh naming conventions).
ReScript supports filenames with special characters: e.g. pages/blog/[slug].res
, but be aware that you can't access these these modules within other modules (since there is no syntax to express modules with e.g. [
characters). Also don't forget to create an additional .resi
file to comply to Fast Refresh rules.