feat: add support for building the preview app for deployment

co-sic commented 8 months ago

Component or Package Name: @jsx-email/cli
Component or Package Version: 1.1.1

Feature Use Case

I want to deploy the Preview server so everybody in the company can check the current email templates. My first approach was to just run email preview inside a Docker Container and deploy that. The problem is that an Error is thrown and ends the process. I suspect it is because it tries to open the page inside of the docker and cannot for some reason? See the log:

yarn run v1.22.19
$ email preview packages/react/src/templates

  🚀 JSX email Preview

  ➜  Local:   http://localhost:55420/
node:events:489
      throw er; // Unhandled 'error' event
      ^

Error: spawn xdg-open ENOENT
    at ChildProcess._handle.onexit (node:internal/child_process:285:19)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21)
Emitted 'error' event on ChildProcess instance at:
    at ChildProcess._handle.onexit (node:internal/child_process:291:12)
    at onErrorNT (node:internal/child_process:483:16)
    at process.processTicksAndRejections (node:internal/process/task_queues:82:21) {
  errno: -2,
  code: 'ENOENT',
  syscall: 'spawn xdg-open',
  path: 'xdg-open',
  spawnargs: [ 'http://localhost:55420/' ]
}

Node.js v20.1.0
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Feature Proposal

For now maybe just an option to skip the auto open of the page would be enough. But maybe there is also a better approach for my need?

Anyway, much :heart: for the project! I recently switched from react-email since i head problems with the dev server and here everything just works and feels very smooth :)

shellscape commented 8 months ago

Thanks for the kind words!

Yes, absolutely. I'm working on a method to make that possible - it's something we need to get working because we want to deploy the preview app against /apps/demo in order to place that on the site. I have a branch in progress for that, but it's currently out of date, and I may prioritize moving to a single package (for which we have a placeholder at https://npmjs.com/package/jsx-email) which will probably make a deployable preview app easier. Will def keep you posted on progress around that.

co-sic commented 8 months ago

I got a workaround for myself by just building the app with vite build and then deploying that with an nginx in a Docker, works for now. Still looking forward to the progress with his.

shellscape commented 8 months ago

@co-sic https://github.com/shellscape/jsx-email/blob/main/packages/cli/scripts/build-samples.ts is what we use to build the apps/demo preview for deployment to https://samples.jsx.email and it's working well. Duplicating that should be a good step if you're looking for something more concrete.

Once my work on #76 is done, we can look at adding a --deployable or some such flag to the email preview command for automating that.

co-sic commented 8 months ago

@shellscape thanks for the hint! After the upgrade to v3 my workaround is no longer working, so i'm trying to make it work again. I tried to use the script you linked for the last 2 hours, but it is just not working. If i don't add the correct path to my templates for the @ path, and then start my build files, i works correclty (just without templates). But as soon as i use the correct path and start it, i just get a white screen with no error log or anything. I added the example to my repo, i just copied the build script you linked. If you have time to take a quick look, maybe you notice something i'm missing?

https://github.com/co-sic/node-playground

I updated the README with the new script to build and run the files. Like this you get the white screen. If you change the path to the templates in https://github.com/co-sic/node-playground/blob/main/src/build.ts to use any other path, then i will work, just without the templates of course.

shellscape commented 8 months ago

When you get that white page, open up devtools and look.at the browser console. More than likely there's an error.

co-sic commented 8 months ago

There is nothing in the console, that was the first thing i checked. The only things i'm seeing in the build stage at the beginning is this:

src/home.tsx (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error.
src/preview.tsx (1:0) Error when using sourcemap for reporting an error: Can't resolve original location of error.

and when i run the files with vite i get this:

(!) Could not auto-determine entry point from rollupOptions or html files and there are no explicit optimizeDeps.include patterns. Skipping dependency pre-bundling.

but that is the case for both cases (if the dev server runs without the templates or if i get the white page).

shellscape commented 8 months ago

Only thing I could suggest would be to walk back and clone the repo, and inspect what the build script in the repo is doing differently. There's probably a subtle difference making a big impact.