From 7df79686bcbc124ea4199a67ad294d0b38cea1c7 Mon Sep 17 00:00:00 2001 From: Feihong Hsu Date: Tue, 6 Feb 2024 21:01:45 -0600 Subject: [PATCH] Add scripts to package.json and delete Makefile --- .github/workflows/deploy.yml | 8 ++--- Makefile | 59 ------------------------------------ README.md | 51 +++++++++---------------------- package.json | 32 +++++++++++++++++++ 4 files changed, 50 insertions(+), 100 deletions(-) delete mode 100644 Makefile diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index 9b4d5f5b..2ae471e3 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -3,7 +3,7 @@ name: Deploy VitePress site to Pages on: # Runs on pushes targeting the `main` branch. push: - branches: [main] + branches: [npm-scripts] # Allows you to run this workflow manually from the Actions tab workflow_dispatch: @@ -40,11 +40,11 @@ jobs: with: ocaml-compiler: 5.1.1 - name: Install all deps - run: make install + run: npm run install-opam-npm - name: Format check - run: make format-check + run: npm run format-check - name: Bundle the demo app - run: make bundle + run: npm run bundle - name: Install dependencies for VitePress run: | cd docs diff --git a/Makefile b/Makefile deleted file mode 100644 index 03d867ae..00000000 --- a/Makefile +++ /dev/null @@ -1,59 +0,0 @@ -project_name = melange-for-react-devs - -DUNE = opam exec -- dune - -.DEFAULT_GOAL := help - -.PHONY: help -help: ## Print this help message - @echo "List of available make commands"; - @echo ""; - @grep -E '^[a-zA-Z_-]+:.*?## .*$$' $(MAKEFILE_LIST) | awk 'BEGIN {FS = ":.*?## "}; {printf " \033[36m%-15s\033[0m %s\n", $$1, $$2}'; - @echo ""; - -.PHONY: create-switch -create-switch: ## Create opam switch - opam switch create . 5.1.1 -y --deps-only - -.PHONY: init -init: create-switch install ## Configure everything to develop this repository in local - -.PHONY: install -install: ## Install development dependencies - npm install # install JavaScript packages that the project might depend on, like `react` or `react-dom` - opam update # make sure that opam has the latest information about published libraries in the opam repository https://opam.ocaml.org/packages/ - opam install -y . --deps-only --with-test # install the Melange and OCaml dependencies - opam exec opam-check-npm-deps # check that the versions of the JavaScript packages installed match the requirements defined by Melange libraries - -.PHONY: build -build: ## Build the project - $(DUNE) build - -.PHONY: build_verbose -build_verbose: ## Build the project - $(DUNE) build --verbose - -.PHONY: serve -serve: ## Serve an application using a local HTTP server - npx vite serve --open - -.PHONY: bundle -bundle: build ## Bundle the JavaScript application - npx vite build - -.PHONY: clean -clean: ## Clean build artifacts and other generated files - $(DUNE) clean - rm -rf dist - -.PHONY: format -format: ## Format the codebase with ocamlformat - $(DUNE) build @fmt --auto-promote - -.PHONY: format-check -format-check: ## Checks if format is correct - $(DUNE) build @fmt - -.PHONY: watch -watch: ## Watch the filesystem and rebuild on every change - $(DUNE) build --watch diff --git a/README.md b/README.md index 2987c658..690d40e7 100644 --- a/README.md +++ b/README.md @@ -6,52 +6,29 @@ Developers](https://react-book.melange.re/). ## Quick Start ```shell -make init +npm run init # In separate terminals: -make watch -make serve -``` - -When running `make init`, you may encounter an error like this: - -``` -[ERROR] Could not determine which packages to install for this switch: - * Missing dependency: - - melange >= 3.0.0-51 - no matching version -``` - -To address this, first run `opam update`, then rerun `make init`. - -## Serving apps - -By default, running `make serve` will serve the Counter app located in -`src/counter`. To run another app, you can `cd` into its directory and run -`make serve` there. For example, to run the Celsius Converter app: - -``` -cd src/celsius-converter-option -make serve -``` - -Another way is to specify the name of the app via the `app` environment variable -before running `make serve` in the root directory, e.g. - -``` -app=celsius-converter-option make serve +npm run watch +npm run serve ``` ## Commands -You can see all available commands by running `make help` or just `make`. Here +All the build commands are defined in the `scripts` field of `package.json`. +This is completely optional, and other tools like `make` could be used. + +You can see all available commands by running `npm run`. There are explanations +of each command in the `scriptsComments` field of the `package.json` file. Here are a few of the most useful ones: -- `make init`: set up opam local switch and download OCaml, Melange and +- `npm run init`: set up opam local switch and download OCaml, Melange and JavaScript dependencies -- `make install`: install OCaml, Melange, and JavaScript dependencies -- `make watch`: watch the filesystem and have Melange rebuild on every change -- `make serve`: Serve an application using a local HTTP server +- `npm run install-opam-npm`: install OCaml, Melange, and JavaScript + dependencies +- `npm run watch`: watch the filesystem and have Melange rebuild on every +change +- `npm run serve`: serve the application with a local HTTP server ## Book diff --git a/package.json b/package.json index 556e85f2..7cb78185 100644 --- a/package.json +++ b/package.json @@ -1,4 +1,36 @@ { + "scripts": { + "preinstall-opam": "opam update", + "install-opam": "opam install -y . --deps-only --with-test", + "check-npm-deps": "opam exec opam-check-npm-deps", + "init": "opam switch create . 5.1.1 -y --deps-only && npm run install-opam-npm", + "install-opam-npm": "npm install && npm run install-opam && npm run check-npm-deps", + "dune": "opam exec -- dune", + "build": "npm run dune -- build", + "build-verbose": "npm run build -- --verbose", + "clean": "npm run dune -- clean", + "format": "npm run format-check -- --auto-promote", + "format-check": "npm run dune -- build @fmt", + "watch": "npm run build -- --watch", + "serve": "vite serve --open", + "bundle": "npm run build && vite build" + }, + "scriptsComments": { + "preinstall-opam": "# Sync opam database with upstream repositories: https://opam.ocaml.org/doc/Usage.html#opam-update", + "install-opam": "# Downloads, builds and installs opam pkgs: https://opam.ocaml.org/doc/Usage.html#opam-install", + "check-npm-deps": "# Checks that Melange bindings have their JS dependencies available: https://github.com/ahrefs/opam-check-npm-deps", + "init": "# Create opam switch: https://opam.ocaml.org/doc/Usage.html#opam-switch and prepare everything to work in development mode (run just once, for initialization)", + "install-opam-npm": "# Install both opam and npm deps", + "dune": "# Run dune, OCaml's build tool", + "build": "# Build the Melange apps", + "build-verbose": "# Build the Melange apps in verbose mode", + "clean": "# Cleans all Melange artifacts", + "format": "# Formats the Melange sources using ocamlformat", + "format-check": "# Checks that the Melange sources have the right formatting (read-only)", + "watch": "opam exec -- dune build --watch @react @node", + "serve": "# Serves the React app in a local server", + "bundle": "# Bundle the JavaScript apps generated by Melange" + }, "dependencies": { "react": "^18.2.0", "react-dom": "^18.2.0"