Add rollup-plugin-serve to serve packages locally during development

[becky-gilbert]

This adds rollup-plugin-serve as a dev dependency, and uses it in the package's rollup config. This rollup plugin package is used to run a local server for files in the package's dist directory, so that during development they can be accessed by our local lookit-api jsPsych study template.

This also adds the 'watch' command to rollup (npm run build), which rebuilds the rollup bundle files in dist when the source files change.

The rollup-plugin-serve servers are specific to each package (because they're added to the package's rollup config, rather than configured at the monorepo level). So each package needs a different port, and probably needs each server running in a separate terminal (I'm not entirely sure as I haven't tested this with multiple packages yet). If this is a problem, maybe we could figure out how to use it on the monorepo root level to serve all package dist folders, and load multiple package files via urls like http://localhost:10001/<packagename>/dist/index.browser.js.

To try this out, on the add-rollup-plugin-serve branch:

• npm install for whole repo
• npm run build in the lookit-initjspsych package (you should see messages in the terminal: "Server listening at http://localhost:10001/" and "waiting for changes...")
• edit the jsPsych template in your local lookit-api to load the lookit-initjspsych file from the host/port you're using: <script src="http://localhost:10001/index.browser.js"></script>. Now when you run jsPsych studies through your local lookit site, the study should load your local/dev version of the lookit-initjspsych/dist/index.browser.min.js file.
• try changing the source in your lookit-jspsych package: e.g. add a console log in the jsPsych.run function in lookit-initjspsych/src/index.ts. You should see in the terminal that, after you make a change to the source file, the rollup re-runs and updates the files in dist.
• run the jspsych study again via the lookit-api - you should find that the new file version is accessed by the jspsych study template (e.g. console log shows up when jsPsych.run is called).

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: cc730a22e66831550c0e5e935f8381dd18bb288c

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

``` Some errors occurred when validating the changesets config: The package "@lookit/lookit-helpers" depends on the ignored package "@lookit/lookit-api", but "@lookit/lookit-helpers" is not being ignored. Please add "@lookit/lookit-helpers" to the `ignore` option. ```

[becky-gilbert]

@okaycj when you set this up, were you opening a new terminal for each package and running npm run dev from each package root? I'm guessing there's no way to run something like npm run dev --workspaces from the monorepo root, because that would start up the first package server/watch and then just wait. Maybe we could & the workspace dev commands somehow, or use concurrently? I might try it... let me know if you think I'm wasting my time 😅

[okaycj]

when you set this up, were you opening a new terminal for each package and running npm run dev from each package root? I'm guessing there's no way to run something like npm run dev --workspaces from the monorepo root, because that would start up the first package server/watch and then just wait. Maybe we could & the workspace dev commands somehow, or use concurrently? I might try it... let me know if you think I'm wasting my time 😅

Honcho! https://github.com/nickstenning/honcho

To summarize, you create a file called Procfile with all the commands you want to run concurrently. Run the command "honcho start" and it does it.

Procfile:

lookit-initjspsych: npm run dev -w @lookit/lookit-initjspsych
lookit-api: npm run dev -w @lookit/lookit-api
lookit-helpers: npm run dev -w @lookit/lookit-helpers

[becky-gilbert]

To summarize, you create a file called Procfile with all the commands you want to run concurrently. Run the command "honcho start" and it does it.

Yay! Exactly what I wanted, thanks! Is it ok for me to add this to the readme?

[okaycj]

a heads up that I'd like to make these changes.

Again, sorry I missed this. I'll try to be a bit better about it.