Access filesystem inside a plugin

Support
,
1

Hello!

I am building a netlify plugin that needs to rewrite some generated html files post-build (but pre-deploy). Is this type of use case supported? if so, can you share how it can be done? Alternatively, it would also work if there’s a way to add widgets/some kind of UI element from a plugin.

Another related question - build event documentation says that onSuccess and onEnd are triggered after deployment. However, when i was experimenting locally, they’re triggered as soon as the integration is built, not when the site is deployed. Is there something i’m missing?

Sorry for the newbie questions, I’m new to netlify and have zero experience with js/ts :). Thanks in advance!

2

Yes.

There’s no code handy, but it’s no different from using node:fs to read/write files.

Not sure what you mean. Plugins don’t have any UI, so what UI element are you proposing to add?

Those events are more useful when deploying using git than CLI.

3

thanks for the quick response @hrishikesh!

Not sure what you mean. Plugins don’t have any UI, so what UI element are you proposing to add?

For example, adding a floating chat bubble on exiting pages. We can rewrite the generated html, but that seems abit too hacky IMO.

4

How are you building the website? It should be easier to embed the widget in your build process than write a build plugin to go that thing.

5

i’m actually developing this plugin to be a generic one that any website can use :slight_smile: It would be easier to ask website owners to embed this widget themselves, but IMO UX is better if it can be done automatically via a plugin

6

Sure if you’re keen on going down that path, you can add the widget on every HTML file found in the site’s publish directory.

7

thanks! And re filesys access - i tried a few different ways to import fs module, but none worked.

Static import import * as fs from 'node:fs'; or import * as fs from 'fs'; followed by fs.readFile() got this error

Cannot read properties of undefined (reading 'readFile')

Dynamic import const fs = require('fs') got Use dynamic require of 'fs' is not supported.

Is there a different way to get access to filesystem?

8

Here’s an example plugin that uses fs: hrishikesh-k/netlify-plugin-bundle-env: A Netlify Build Plugin to inject environment variables in Netlify Functions during Netlify Builds. (github.com). Important to note though that it was made as a build plugin instead of an integration: Build Plugins | Netlify Docs, though it’s mostly the same.

9

Thanks @hrishikesh !

10

@hrishikesh re: deploy-time trigger. Can you elaborate abit more on “Those events are more useful when deploying using git than CLI.”? I’m trying build a plugin (or some kind of integration) that triggers a set of API calls after a site is deployed successfully.

A few more question about fs access (i can make a separate post about this if needed)

  1. When i scan html files in PUBLISH_DIR, is it safe to assume that the html will be served at <root_url>/<path_to_html>? If not, is there a way to get routing information programmatically?
  2. Is there a way to get metadata on the generated static contents? I’m particularly interested in last modified time of htmls.

Thanks again Hrishikesh!

11

I just meant that the events you mentioned are more useful when actually running the build on Netlify Cloud Builds than the CLI.

Yes

File system | Node.js v21.6.1 Documentation (nodejs.org)

12

@hrishikesh

Re deployment time trigger: yeah it’s more useful when running on netlify cloud build. Does it mean onEnd/onSuccess is triggered at build-time in CLI, and deploy time in cloud?

Re FS: I should’ve clarified. What i meant by “last modified time” is the last time the content of the html was modified. Suppose i build and deploy my project multiple times, i’m assuming only the updated parts of the website is pushed to CDN. Essentially i’m looking to build a “change detector” of sorts that only processes the parts of the website that was modified since last deployed

13

It will run as documented on the cloud. In the CLI, I’m not sure how exactly it will work, but yeah I don’t expect it to run after a deploy lke on the cloud.

That’s not available. There are ways to do something creative using the Netlify API, but not worth it, I’d say.

14

thank you @hrishikesh !