Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
2 of 5 tasks
thescientist13 opened this issue Aug 7, 2021 · 3 comments · Fixed by #696
Closed
2 of 5 tasks

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

thescientist13 opened this issue Aug 7, 2021 · 3 comments · Fixed by #696
Assignees
Labels
Guide P0 Critical issue that should get addressed ASAP Plugins Greenwood Plugins v0.15.2 v0.16.0
Milestone

Comments

@thescientist13
Copy link
Member

thescientist13 commented Aug 7, 2021

Type of Change

  • New Feature Request
  • Documentation / Website
  • Improvement / Suggestion
  • Bug
  • Other (please clarify below)

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 #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 thescientist13 added P0 Critical issue that should get addressed ASAP Plugins Greenwood Plugins Guide labels Aug 7, 2021
@thescientist13 thescientist13 added this to the 1.0 milestone Aug 7, 2021
@thescientist13 thescientist13 self-assigned this Aug 7, 2021
@thescientist13 thescientist13 changed the title unable to build or serve a theme pack _for development_ unable to build or serve with Greenwood when developing a theme pack Aug 7, 2021
@thescientist13
Copy link
Member Author

thescientist13 commented Aug 7, 2021

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
Copy link
Member Author

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
Copy link
Member Author

thescientist13 commented Aug 9, 2021

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Guide P0 Critical issue that should get addressed ASAP Plugins Greenwood Plugins v0.15.2 v0.16.0
Projects
None yet
Development

Successfully merging a pull request may close this issue.

1 participant