ProjectEvergreen / greenwood

Greenwood is your workbench for the web, embracing web standards from the ground up to empower your stack from front to back.
https://www.greenwoodjs.io
MIT License
96 stars 9 forks source link

unable to `build` or `serve` with Greenwood when developing a theme pack #689

Closed thescientist13 closed 3 years ago

thescientist13 commented 3 years ago

Type of Change

Summary

Bit of a fail on my end, but although I added test cases for developing and building a Greenwood project when consuming a Theme Pack, I didn't actually properly test the perspective of a user a publishing / producing a theme pack with Greenwood. And so although parts of the Theme Pack guide still apply for development at least, trying to run greenwood build | serve fails because (naturally) Rollup is going to find the paths the paths in HTML to node modules in the developer's repository.

FWIW greenwood develop works just fine, and I still need to test with publishing, so will see if there is a need for any updates on that as well, and add them here.

For now, will mark v0.15.0 release as a pre-release for now.

Details

So in this reference repo, when I run greenwood build on that branch, Rollup is unhappy

% yarn clean && yarn build
yarn run v1.22.5
$ rimraf public .greenwood/
✨  Done in 0.27s.
yarn run v1.22.5
$ greenwood build
-------------------------------------------------------
Welcome to Greenwood (v0.15.0) ♻️
-------------------------------------------------------
Running Greenwood with the build command.
Initializing project config
Initializing project workspace contexts
Generating graph of workspace files...
Started local development server at localhost:1984
GraphQLServer started at http://localhost:4000/
Prerendering pages at http://127.0.0.1:1984
pages to render
 src/pages/index.html
 src/pages/slides/1.md
 src/pages/slides/2.md
 src/pages/slides/3.md
 src/pages/slides/4.md
 src/pages/slides/5.md
 src/pages/slides/6.md
 src/pages/slides/7.md
prerendering page... /
prerendering page... /slides/1/
prerendering page... /slides/2/
prerendering page... /slides/3/
prerendering page... /slides/4/
prerendering page... /slides/5/
prerendering page... /slides/6/
prerendering page... /slides/7/
prerendering complete for page /slides/6/.
prerendering complete for page /slides/7/.
prerendering complete for page /slides/1/.
prerendering complete for page /slides/3/.
prerendering complete for page /slides/2/.
prerendering complete for page /slides/5/.
prerendering complete for page /slides/4/.
prerendering complete for page /.
done prerendering all pages
headScripts.forEach((scriptTag) /node_modules/greenwood-starter-presentation/dist/components/presenter-mode.js
Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/components/presenter-mode.js'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:187:35
    at Array.forEach (<anonymous>)
    at Object.buildStart (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:172:23)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:18870:25
    at async Promise.all (index 2)
    at async rollupInternal (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:20239:9)
    at async /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/lifecycles/bundle.js:12:24 {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/components/presenter-mode.js'
}
headLinks.forEach((linkTag)  node_modules/greenwood-starter-presentation/dist/styles/theme.css
Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:240:33
    at Array.forEach (<anonymous>)
    at Object.buildStart (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:223:21)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:18870:25
    at async Promise.all (index 2)
    at async rollupInternal (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:20239:9)
    at async /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/lifecycles/bundle.js:12:24 {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
}
headLinks.forEach((linkTag)  node_modules/greenwood-starter-presentation/dist/styles/theme.css
Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:240:33
    at Array.forEach (<anonymous>)
    at Object.buildStart (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:223:21)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:18870:25
    at async Promise.all (index 2)
    at async rollupInternal (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:20239:9)
    at async /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/lifecycles/bundle.js:12:24 {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
}
headLinks.forEach((linkTag)  node_modules/greenwood-starter-presentation/dist/styles/theme.css
Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:240:33
    at Array.forEach (<anonymous>)
    at Object.buildStart (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:223:21)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:18870:25
    at async Promise.all (index 2)
    at async rollupInternal (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:20239:9)
    at async /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/lifecycles/bundle.js:12:24 {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
}
headLinks.forEach((linkTag)  node_modules/greenwood-starter-presentation/dist/styles/theme.css
Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:240:33
    at Array.forEach (<anonymous>)
    at Object.buildStart (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:223:21)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:18870:25
    at async Promise.all (index 2)
    at async rollupInternal (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:20239:9)
    at async /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/lifecycles/bundle.js:12:24 {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
}
headLinks.forEach((linkTag)  node_modules/greenwood-starter-presentation/dist/styles/theme.css
Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:240:33
    at Array.forEach (<anonymous>)
    at Object.buildStart (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:223:21)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:18870:25
    at async Promise.all (index 2)
    at async rollupInternal (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:20239:9)
    at async /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/lifecycles/bundle.js:12:24 {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
}
headLinks.forEach((linkTag)  node_modules/greenwood-starter-presentation/dist/styles/theme.css
Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:240:33
    at Array.forEach (<anonymous>)
    at Object.buildStart (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:223:21)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:18870:25
    at async Promise.all (index 2)
    at async rollupInternal (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:20239:9)
    at async /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/lifecycles/bundle.js:12:24 {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
}
headLinks.forEach((linkTag)  node_modules/greenwood-starter-presentation/dist/styles/theme.css
Error: ENOENT: no such file or directory, open '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
    at Object.openSync (fs.js:476:3)
    at Object.readFileSync (fs.js:377:35)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:240:33
    at Array.forEach (<anonymous>)
    at Object.buildStart (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/config/rollup.config.js:223:21)
    at /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:18870:25
    at async Promise.all (index 2)
    at async rollupInternal (/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/rollup/dist/shared/rollup.js:20239:9)
    at async /Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/@greenwood/cli/src/lifecycles/bundle.js:12:24 {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/Users/owenbuckley/Workspace/github/repos/greenwood-starter-presentation/node_modules/greenwood-starter-presentation/dist/styles/theme.css'
}
copying assets/ directory...
copying graph.json...
✨  Done in 4.46s.

Basically, just like we suggest creating a resource for development, we're going to need to do something similar in our rollup code to see if any user plugins can resolve it? Ideally would like to find a way to have this only be a local development workaround. Maybe an agreed upon rollup plugin that users can drop into their development environment?

Maybe some future thoughts for https://github.com/ProjectEvergreen/greenwood/discussions/682


Should also add some tests to cover this persona in our test cases; someone building a Greenwood plugin_

Also, noticed that our current workaround for testing [if the user is developing or not](https://github.com/ProjectEvergreen/greenwood/blob/v0.15.0/packages/cli/test/cases/build.plugins.context/theme-pack-context-plugin.js#L15), _realllllllly slows down development_, probably because we're spawning a process on each request? Yuck, we should fix that too.
thescientist13 commented 3 years ago

OMG, I just realized we might be able to completely bypass this by just using having all plugin authors just use relative paths in their templates!? 🤦

So instead of hardcoding node_modules path like this like we are documenting now

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="/node_modules/greenwood-starter-presentation/dist/styles/theme.css"></link>
    <link rel="stylesheet" href="/node_modules/greenwood-starter-presentation/dist/styles/main.css"></link>
  </head>

  <body>
    <content-outlet></content-outlet>
  </body>

</html>

to just this!

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="../styles/theme.css"></link>
    <link rel="stylesheet" href="../styles/main.css"></link>
  </head>

  <body>
    <content-outlet></content-outlet>
  </body>

</html>

that should work anywhere as long as you just copy the directory structure to node modules. This means that we should then be able to completely remove the need for all of the issues here - #682

  1. Having to use a development only Resource plugin
  2. Needing to detect installation of the plugin to determine where the template location is

🤞

thescientist13 commented 3 years ago

ANOTHER UPDATE:

Testing this locally in my starter presentation this also solves the serve problem so seems to be we are on the right track!

Screen Shot 2021-08-07 at 3 23 29 PM

Just need to test publishing and so it could just be that is just something that we might need to update in the docs / specs, and may not require another release, per se. 💪

thescientist13 commented 3 years ago

So unfortunately, while relative paths work great for the plugin author's local development context

When consuming a theme pack template from a consuming project and wanting to do something like this

<link rel="stylesheet" href="../styles/theme.css"></link>

The URL coming into the Koa server will then look like this, which will then 404 (since right now we only really check the user workspace for these kinds of relative paths)

ORIGINAL URL /<pages-directory/styles/theme.css

So if we just recommend plugin authors be explicit about node modules location (like the current recommendation)

<link rel="stylesheet" href="/node_modules/greenwood-starter-presentation/dist/styles/theme.css"></link>

then at least everything works in the user's app, both with yarn develop and yarn serve 🙏 😅

Screen Shot 2021-08-09 at 4 14 12 PM

So I think we'll have to "go back" to the bit more cumbersome theme pack author workflow, but there will also need to be a rollup work around we'll need to add for local development as well, so Rollup knows where to look for things. I think this would be the same solution we use for GraphQL.

And I will definitely write some more tests since I totally missed properly testing the duality of theme packs. (developing for and consuming) 🤦

Also, I see we should probably warn if the template location doesn't exist, too.