@lazarv/create-react-server 0.0.0-experimental-d003259-20250211-2495688e

package/steps/package.mjs

@@ -0,0 +1,104 @@
+import { execSync } from "node:child_process";
+
+import { confirm, select } from "@inquirer/prompts";
+import colors from "picocolors";
+
+import { theme } from "../lib/theme.mjs";
+
+const isPnpmInstalled = async () => {
+  try {
+    execSync("pnpm --version", {
+      stdio: "ignore",
+    });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const isYarnInstalled = async () => {
+  try {
+    execSync("yarn --version", {
+      stdio: "ignore",
+    });
+    return true;
+  } catch {
+    return false;
+  }
+};
+
+const lockFilename = {
+  npm: "package-lock.json",
+  pnpm: "pnpm-lock.yaml",
+  yarn: "yarn.lock",
+};
+
+const displayName = {
+  yarn: "Yarn",
+};
+
+const ciInstallArgs = {
+  npm: "--loglevel notice",
+  pnpm: "--reporter=append-only",
+  yarn: "--no-progress --inline-builds",
+};
+
+export default async (context) => {
+  const npmUseragent = process.env.npm_config_user_agent;
+  const defaultPackageManager =
+    npmUseragent?.includes("pnpm") || !context.props.custom
+      ? "pnpm"
+      : npmUseragent?.includes("yarn")
+        ? "yarn"
+        : "npm";
+  const packageManager = !context.props.custom
+    ? defaultPackageManager
+    : await select(
+        {
+          message: "Package manager",
+          default: defaultPackageManager,
+          choices: [
+            { name: "npm", value: "npm" },
+            {
+              name: "pnpm",
+              value: "pnpm",
+              disabled: !(await isPnpmInstalled()) ? "(not installed)" : false,
+            },
+            {
+              name: "Yarn",
+              value: "yarn",
+              disabled: !(await isYarnInstalled()) ? "(not installed)" : false,
+            },
+          ],
+          theme,
+        },
+        context
+      );
+
+  let install = true;
+  if (context.props.custom) {
+    install = await confirm(
+      {
+        message: `Install dependencies using ${colors.cyan(displayName[packageManager] ?? packageManager)}?`,
+        default: true,
+        theme,
+      },
+      context
+    );
+  }
+
+  return {
+    ...context,
+    props: {
+      ...context.props,
+      packageManager: {
+        name: packageManager,
+        lock: lockFilename[packageManager],
+        run: packageManager === "npm" ? "npm run" : packageManager,
+        start: packageManager === "npm" ? "npm start" : packageManager,
+        install,
+        ciInstallArgs: ciInstallArgs[packageManager],
+      },
+    },
+  };
+};

package/steps/port.mjs

@@ -0,0 +1,42 @@
+import { number } from "@inquirer/prompts";
+
+import { theme } from "../lib/theme.mjs";
+
+export default async (context) => {
+  const port = context.env.options.port
+    ? parseInt(context.env.options.port)
+    : !context.props.custom || context.env.hasOptions
+      ? 3000
+      : await number(
+          {
+            message: "Port",
+            default: 3000,
+            description: "The port to use for the server",
+            min: 1,
+            max: 65535,
+            theme,
+          },
+          context
+        );
+  return {
+    ...context,
+    props: {
+      ...context.props,
+      port,
+    },
+    partials:
+      port !== 3000
+        ? {
+            ...context.partials,
+            "react-server.config.json": {
+              ...context.partials["react-server.config.json"],
+              type: "json",
+              merge: [
+                ...(context.partials["react-server.config.json"]?.merge ?? []),
+                { server: { port } },
+              ],
+            },
+          }
+        : context.partials,
+  };
+};

package/steps/preset.mjs

@@ -0,0 +1,188 @@
+import { join, relative } from "node:path";
+
+import { confirm, select, Separator } from "@inquirer/prompts";
+import glob from "fast-glob";
+
+import { json } from "../lib/files.mjs";
+import { theme } from "../lib/theme.mjs";
+
+const defaultFeatures = ["git", "eslint", "prettier", "tailwind"];
+const presets = {
+  blank: {
+    features: [],
+  },
+  "blank-ts": {
+    features: ["ts"],
+  },
+  "get-started": {
+    features: defaultFeatures,
+  },
+  "get-started-ts": {
+    features: ["ts", ...defaultFeatures],
+    alias: "~/*",
+  },
+  router: {
+    features: ["ts", ...defaultFeatures],
+    alias: "~/*",
+  },
+  nextjs: {
+    features: ["ts", ...defaultFeatures, "react-swc"],
+    alias: "~/*",
+  },
+};
+
+export default async (context) => {
+  const choices = [
+    {
+      name: "Get started (TypeScript)",
+      value: "get-started-ts",
+      description: "A simple project to get you started using TypeScript",
+      shared: true,
+    },
+    new Separator(),
+    {
+      name: "Blank",
+      value: "blank",
+      description: "A blank project with no additional files",
+    },
+    {
+      name: "Blank (TypeScript)",
+      value: "blank-ts",
+      description: "A blank TypeScript project with no additional files",
+    },
+    {
+      name: "Get started (JavaScript)",
+      value: "get-started",
+      description: "A simple project to get you started",
+      shared: true,
+    },
+    {
+      name: "File-system based routing",
+      value: "router",
+      description:
+        "A TypeScript project utilizing type-safe file-system based routing",
+      shared: true,
+    },
+    {
+      name: "Next.js App Router configuration",
+      value: "nextjs",
+      description:
+        "A TypeScript project utilizing a partially Next.js-compatible file-system based routing configuration",
+      shared: true,
+    },
+    {
+      name: "Blog",
+      value: "blog",
+      description: "A simple blog example project",
+      disabled: "(coming soon)",
+    },
+    {
+      name: "Portfolio",
+      value: "portfolio",
+      description: "A simple portfolio example project",
+      disabled: "(coming soon)",
+    },
+    {
+      name: "Documentation",
+      value: "docs",
+      description: "A simple documentation example project",
+      disabled: "(coming soon)",
+    },
+    new Separator(),
+  ];
+
+  const type =
+    context.env.options.preset ??
+    (await select(
+      {
+        message: "Preset",
+        choices,
+        theme,
+      },
+      context
+    ));
+
+  let custom = false;
+  if (!context.env.hasOptions) {
+    custom = await confirm(
+      {
+        message: "Do you want to customize your project?",
+        default: false,
+        theme,
+      },
+      context
+    );
+  }
+
+  const template = async (context) => {
+    const templateAppDir = join(context.env.templateDir, type);
+    const files = (
+      await glob(["**/*"], {
+        cwd: templateAppDir,
+        onlyFiles: true,
+        absolute: true,
+      })
+    ).map((file) => [
+      file,
+      join(context.env.projectDir, relative(templateAppDir, file)),
+    ]);
+
+    let sharedFiles = [];
+    const choice = choices.find((choice) => choice.value === type);
+    if (choice.shared) {
+      const sharedTemplateAppDir = join(context.env.templateDir, "shared");
+      sharedFiles = (
+        await glob(["**/*"], {
+          cwd: sharedTemplateAppDir,
+          onlyFiles: true,
+          absolute: true,
+        })
+      ).map((file) => [
+        file,
+        join(context.env.projectDir, relative(sharedTemplateAppDir, file)),
+      ]);
+    }
+
+    return {
+      ...context,
+      interactive: !context.env.options.preset,
+      env: {
+        ...context.env,
+        templateAppDir,
+      },
+      files: [...(context.files ?? []), ...files, ...sharedFiles],
+      partials: {
+        ...context.partials,
+        ...(files.includes("package.json")
+          ? {
+              "package.json": {
+                ...context.partials["package.json"],
+                merge: [
+                  ...(context.partials["package.json"]?.merge ?? []),
+                  await json(join(templateAppDir, "package.json")),
+                ],
+              },
+            }
+          : {}),
+      },
+    };
+  };
+
+  return {
+    ...context,
+    props: {
+      ...context.props,
+      template,
+      custom,
+      preset: {
+        type,
+        ...presets[type],
+      },
+    },
+    template,
+  };
+};
+
+export async function prepare(context) {
+  return context.template(context);
+}

package/steps/state-management.mjs

@@ -0,0 +1,68 @@
+import { select, Separator } from "@inquirer/prompts";
+
+import { theme } from "../lib/theme.mjs";
+
+export default [
+  (context) => context.props.thirdParty,
+  async (context) => {
+    const auth = !context.props.custom
+      ? "none"
+      : await select(
+          {
+            message: "State management provider",
+            choices: [
+              {
+                name: "None",
+                value: "none",
+                description: "No state management",
+              },
+              new Separator(),
+              {
+                name: "TanStack Query",
+                value: "tanstack-query",
+                description: "Add TanStack Query integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Zustand",
+                value: "zustand",
+                description: "Add Zustand integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Jotai",
+                value: "jotai",
+                description: "Add Jotai integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Valtio",
+                value: "valtio",
+                description: "Add Valtio integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Redux",
+                value: "redux",
+                description: "Add Redux integration",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "MobX",
+                value: "mobx",
+                description: "Add MobX integration",
+                disabled: "(coming soon)",
+              },
+              new Separator(),
+            ],
+            theme,
+          },
+          context
+        );
+
+    return {
+      ...context,
+      props: { ...context.props, auth },
+    };
+  },
+];

package/steps/third-party.mjs

@@ -0,0 +1,19 @@
+import { confirm } from "@inquirer/prompts";
+
+import { theme } from "../lib/theme.mjs";
+
+export default async (context) => {
+  const answer = await confirm({
+    message: "Use third-party integrations?",
+    default: false,
+    theme,
+  });
+
+  return {
+    ...context,
+    props: {
+      ...context.props,
+      thirdParty: answer,
+    },
+  };
+};

package/steps/ui.mjs

@@ -0,0 +1,87 @@
+import { select, Separator } from "@inquirer/prompts";
+import colors from "picocolors";
+
+import { theme } from "../lib/theme.mjs";
+
+export default [
+  (context) => context.props.thirdParty,
+  async (context) => {
+    const ui = !context.props.custom
+      ? "none"
+      : await select(
+          {
+            message: "UI Framework",
+            choices: [
+              {
+                name: "None",
+                value: "none",
+                description: "No UI framework",
+              },
+              new Separator(),
+              {
+                name: `shadcn/ui ${colors.yellow("(recommended)")}`,
+                value: "shadcn",
+                description: "Shadcn/UI",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Radix UI",
+                value: "radix-ui",
+                description: "Radix UI",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Mantine",
+                value: "mantine",
+                description: "Mantine",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Material UI",
+                value: "mui",
+                description: "Material UI",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Chakra UI",
+                value: "chakra",
+                description: "Chakra UI",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Ant Design",
+                value: "ant",
+                description: "Ant Design",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Next UI",
+                value: "next-ui",
+                description: "Next UI",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Grommet",
+                value: "grommet",
+                description: "Grommet",
+                disabled: "(coming soon)",
+              },
+              {
+                name: "Flowbite",
+                value: "flowbite",
+                description: "Flowbite",
+                disabled: "(coming soon)",
+              },
+              new Separator(),
+            ],
+            theme,
+          },
+          context
+        );
+
+    return {
+      ...context,
+      props: { ...context.props, ui },
+    };
+  },
+];

package/templates/.dockerignore

@@ -0,0 +1,5 @@
+**/*
+!react-server.config.*
+!react-server.*.config.*
+!src
+!public

package/templates/.gitignore.template

@@ -0,0 +1,19 @@
+# Dependencies
+node_modules
+
+# @lazarv/react-server specific
+.react-server
+
+# Environment files
+.env
+.env.local
+.env.*.local
+
+# Logs
+*.log
+
+# Cache
+.eslintcache
+
+# Vercel
+.vercel

package/templates/.prettierignore

@@ -0,0 +1,3 @@
+*.md
+*-lock.*
+*.lock

package/templates/.prettierrc

@@ -0,0 +1,11 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": false,
+  "quoteProps": "as-needed",
+  "trailingComma": "es5",
+  "bracketSpacing": true,
+  "bracketSameLine": false
+}

package/templates/Dockerfile.npm

@@ -0,0 +1,49 @@
+# Define build argument for port with default value
+ARG PORT=3000
+
+# Stage 1: Build
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy source files
+COPY . .
+
+# Install dependencies
+RUN --mount=type=cache,target=/root/.npm \
+  npm ci
+
+# Build the application
+RUN npm run build
+
+# Stage 2: Production
+FROM node:20-alpine AS runner
+
+# Forward the build argument
+ARG PORT
+ENV PORT=$PORT
+
+# Set working directory
+WORKDIR /app
+
+# Copy package.json, node_modules and .react-server from builder stage
+COPY --from=builder /app/package.json ./
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/.react-server ./.react-server
+
+# Prune dev dependencies
+RUN --mount=type=cache,target=/root/.npm \
+  npm prune --production
+
+# Run as non-root user
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
+  chown -R nodejs:nodejs /app
+USER nodejs
+
+# Expose the port your app runs on
+EXPOSE ${PORT}
+
+# Start the application
+CMD ["npm", "start", "--", "--host"]

package/templates/Dockerfile.pnpm

@@ -0,0 +1,71 @@
+# Define build argument for port with default value
+ARG PORT=3000
+
+# Stage 1: Build
+FROM node:20-alpine AS builder
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files first to check for corepack and lock files
+COPY package.json pnpm-lock.yaml ./
+
+# Install pnpm using corepack or npm
+RUN --mount=type=cache,target=/root/.npm \
+  if grep -q "\"packageManager\":" "package.json"; then \
+  corepack enable && corepack prepare; \
+  else \
+  npm install -g pnpm; \
+  fi
+
+# Install dependencies using pnpm
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store \
+  pnpm install --frozen-lockfile
+
+# Copy source files and .react-server directory
+COPY . .
+
+# Build using pnpm
+RUN pnpm run build
+
+# Stage 2: Production
+FROM node:20-alpine AS runner
+
+# Forward the build argument
+ARG PORT
+ENV PORT=$PORT
+
+# Set working directory
+WORKDIR /app
+
+# Copy package files and lock files
+COPY --from=builder /app/package.json /app/pnpm-lock.yaml ./
+
+# Install pnpm in production stage
+RUN --mount=type=cache,target=/root/.npm \
+  if grep -q "\"packageManager\":" "package.json"; then \
+  corepack enable && corepack prepare; \
+  else \
+  npm install -g pnpm; \
+  fi
+
+# Copy package.json, pnpm-lock.yaml, node_modules and .react-server from builder stage
+COPY --from=builder /app/package.json /app/pnpm-lock.yaml ./
+COPY --from=builder /app/node_modules ./node_modules
+COPY --from=builder /app/.react-server ./.react-server
+
+# Prune dev dependencies using pnpm
+RUN --mount=type=cache,target=/root/.local/share/pnpm/store \
+  pnpm prune --prod
+
+# Run as non-root user
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
+  chown -R nodejs:nodejs /app
+USER nodejs
+
+# Expose the port your app runs on
+EXPOSE ${PORT}
+
+# Start the application using pnpm
+CMD ["pnpm", "start", "--host"]