A non-react frontend in nx-monorepo

[zetashift]

So I'm writing a prototype for work and thanks to Smithy and the API Gateway integration I can get that part done very fast.
Now I'm looking to write a frontend site(well technically two, but let's just go with one for now).
From the docs, I see that I can choose between:

• https://aws.github.io/aws-prototyping-sdk/typescript/cloudscape-react-ts-website/index.html
• https://aws.github.io/aws-prototyping-sdk/typescript/static-website/index.html

I won't be using cloudscape(I'll be using tailwind) nor react. So option 1 is kind of a no-go for me. But option 2 seems almost ideal. However, static-website doesn't have a lot of docs. So as a noob, I'm unsure about how I would "integrate" stuff like Vite/Tailwind and a frontend metaframework.

• For frontend dev, I use vite, is integrating a frontend static website using vite as the dev server with Nx/Projen possible? Do I just include vite in my devDeps, and does the same go for TailwindCSS?
• For my frontend meta framework I'll be using QwikCity and I was wondering how to make that work with nx-monorepo, do I have to create a new Projen from scratch?

When I think about it seems, that I should just be able to do make a new typescript-app that includes tailwindcss and vite and qwik city in their devDeps and that project depends on my smithy api?

[zetashift]

Right so after a couple hours of messing with Projen(I discovered it's more about Projen than it is about Nx), I did learn some things! :P

• Projen is what drives most of the settings.
• There is a projen dev server if I run npx projen dev in my frontend project. So no real need for Vite.
• Next.js and Projen is the easiest way to get a frontend running. Not the biggest fan of Next.js, but I can't really argue with how easy it is to get started with it using Projen.
• TailwindCSS config can't be changed I believe, so I can't add tailwind plugins.

So this discussion doesn't really belong here, it's more Projen related.

[cogwirrel]

Nice! :) Just to add a couple of things here:

static-website is a CDK construct for deploying a static website to S3, fronting it with CloudFront and WAF - so it itself doesn't set up a frontend for you - you pass it the path to your frontend project's build directory and it manages uploading the html/js etc to S3 whenever you deploy your CDK infrastructure.

cloudscape-react-ts-website is a good starter project for creating a website with React and CloudScape, but it's basically a TypeScriptProject with extra dependencies, scripts and sample code. For making use of your preferred frameworks you could always start with a TypeScriptProject in your .projenrc.ts too and add the appropriate dependencies and scripts? :)

[zetashift]

Oh nice, actually I think that means I can still use static-website for this demo :D.

I actually tried to build something """from scratch"""", but I used https://projen.io/api/API.html#projen-typescript-typescriptappproject instead of TypeScriptProject. I used Qwik/QwikCity instead of react as well.

I ran into:

• Couldn't configure tsx correctly(I believe). I looked at https://github.com/projen/projen/blob/main/src/web/react.ts#L118. I got errors I couldn't really decipher.
• I don't know how to chuck in a dev server, like npx projen dev for the NextJS project for my project.

I am 100% sure that this is because I'm just new to projen, heck before today I thought all the heavy lifiting was done by Nx, but projen does all the cool stuff!

[cogwirrel]

Awesome! 😄

Ah cool! :) Hmm not sure about the first one! For things like a dev server, in projen they're just "tasks" which you define as cli commands, eg:

const myProject = new TypeScriptProject(...);
const devTask = myProject.tasks.addTask('dev');
devTask.exec('vite serve');

Projen definitely takes some getting used to but it's a really nice way to manage projects once you get the hang of it! 😄

[zetashift]

Ohhh, it's just a task! How simple.

Didn't get Qwik working, but with your help, Solid was quite easy:

const frontend = new TypeScriptAppProject({
  name: "frontend",
  defaultReleaseBranch: "main",
  parent: monorepo,
  srcdir: "src",
  deps: [
    api.package.packageName,
    "@solidjs/meta",
    "@solidjs/router",
    "solid-js",
    "solid-start",
    "undici",
  ],
  devDeps: ["@types/node", "esbuild", "postcss", "solid-start-node", "vite"],
  outdir: "packages/frontend",
  tsconfig: {
    include: ["**/*.ts", "**/*.tsx"],
    compilerOptions: {
      allowSyntheticDefaultImports: true,
      esModuleInterop: true,
      module: "ESNext",
      moduleResolution: TypeScriptModuleResolution.NODE,
      resolveJsonModule: true,
      jsx: TypeScriptJsxMode.PRESERVE,
      paths: {
        "~/*": ["./src/*"],
      },
      allowJs: true,
      skipLibCheck: true,
      noEmit: true,
      lib: ["dom", "dom.iterable", "esnext"],
      strict: true,
      target: "esnext",
    },
  },
});

new PostCss(frontend, { tailwind: true });
const devTask = frontend.tasks.addTask("dev");
devTask.exec("solid-start dev");