feat: create projects with 404 page on all plans (#5309)

Ref #2782

Here I did a few things

- allow `/*` path on free plan
- allow changing status code on free plan
- create "Not Found" page for all new projects



https://github.com/user-attachments/assets/1f36882f-3c09-4814-a1ee-d6bdfd468467

Author: TrySound

apps/builder/app/builder/features/pages/page-settings.tsx

@@ -366,13 +366,11 @@ const StatusField = ({
   onChange: (value: undefined | string) => void;
 }) => {
   const id = useId();
-  const { allowDynamicData } = useStore($userPlanFeatures);
   const { variableValues, scope, aliases } = useStore($pageRootScope);
   return (
     <Grid gap={1}>
       <Flex align="center" gap={1}>
         <Label htmlFor={id}>Status Code </Label>
-        {allowDynamicData === false && <ProBadge>PRO</ProBadge>}
         <Tooltip
           content={
             <Text>
@@ -801,7 +799,7 @@ const FormFields = ({
           {allowDynamicData === false && (
             <PanelBanner>
               <Text>
-                Dynamic routing, redirect and status code are a part of the CMS
+                Dynamic routing and redirect are a part of the CMS
                 functionality.
               </Text>
               <Flex align="center" gap={1}>

apps/builder/app/builder/features/topbar/publish.tsx

@@ -263,12 +263,10 @@ const $usedProFeatures = computed(
         pageId: page.id,
         instanceSelector: [page.rootInstanceId],
       };
-      if (isPathnamePattern(page.path)) {
+      // allow catch all for 404 pages on free plan
+      if (isPathnamePattern(page.path) && page.path !== "/*") {
         features.set("Dynamic path", { awareness, view: "pageSettings" });
       }
-      if (page.meta.status && page.meta.status !== `200`) {
-        features.set("Page status code", { awareness, view: "pageSettings" });
-      }
       if (page.meta.redirect && page.meta.redirect !== `""`) {
         features.set("Redirect", { awareness, view: "pageSettings" });
       }

packages/project-build/package.json

@@ -24,6 +24,7 @@
     "@webstudio-is/authorization-token": "workspace:*",
     "@webstudio-is/postrest": "workspace:*",
     "@webstudio-is/sdk": "workspace:*",
+    "@webstudio-is/template": "workspace:*",
     "@webstudio-is/trpc-interface": "workspace:*",
     "nanoid": "^5.1.5",
     "zod": "^3.24.2"

packages/project-build/src/db/build.ts

@@ -1,33 +1,31 @@
 /* eslint no-console: ["error", { allow: ["time", "timeEnd"] }] */
 
-import { nanoid } from "nanoid";
 import type { Database } from "@webstudio-is/postrest/index.server";
 import {
   AuthorizationError,
   authorizeProject,
   type AppContext,
 } from "@webstudio-is/trpc-interface/index.server";
 import { db as authDb } from "@webstudio-is/authorization-token/index.server";
-import {
-  type Deployment,
-  type Resource,
-  type StyleSource,
-  type Prop,
-  type DataSource,
-  type Instance,
-  type Breakpoint,
-  type StyleSourceSelection,
-  type StyleDecl,
+import type {
+  Deployment,
+  Resource,
+  StyleSource,
+  Prop,
+  DataSource,
+  Instance,
+  Breakpoint,
+  StyleSourceSelection,
+  StyleDecl,
   Pages,
-  initialBreakpoints,
-  elementComponent,
 } from "@webstudio-is/sdk";
 import type { Build, CompactBuild } from "../types";
 import { parseDeployment } from "./deployment";
-import { serializePages } from "./pages";
-import { createDefaultPages } from "../shared/pages-utils";
 import type { MarketplaceProduct } from "../shared//marketplace";
 import { breakCyclesMutable } from "../shared/graph-utils";
+import { createPages } from "../template";
+import { serializeStyles } from "./styles";
+import { serializeStyleSourceSelections } from "./style-source-selections";
 
 const parseCompactData = <Item>(serialized: string) =>
   JSON.parse(serialized) as Item[];
@@ -222,35 +220,6 @@ export const loadApprovedProdBuildByProjectId = async (
   return parseCompactBuild(build.data[0]);
 };
 
-const createNewPageInstances = (): Build["instances"] => {
-  const instanceId = nanoid();
-  return [
-    [
-      instanceId,
-      {
-        type: "instance",
-        id: instanceId,
-        component: elementComponent,
-        tag: "body",
-        children: [],
-      },
-    ],
-  ];
-};
-
-const createInitialBreakpoints = (): [Breakpoint["id"], Breakpoint][] => {
-  return initialBreakpoints.map((breakpoint) => {
-    const id = nanoid();
-    return [
-      id,
-      {
-        ...breakpoint,
-        id,
-      },
-    ];
-  });
-};
-
 /*
  * We create "dev" build in two cases:
  *   1. when we create a new project
@@ -263,16 +232,21 @@ export const createBuild = async (
   },
   context: AppContext
 ): Promise<void> => {
-  const newInstances = createNewPageInstances();
-  const [rootInstanceId] = newInstances[0];
-  const defaultPages = createDefaultPages({ rootInstanceId });
-
+  const data = createPages();
   const newBuild = await context.postgrest.client.from("Build").insert({
     id: crypto.randomUUID(),
     projectId: props.projectId,
-    pages: serializePages(defaultPages),
-    breakpoints: serializeData<Breakpoint>(new Map(createInitialBreakpoints())),
-    instances: serializeData<Instance>(new Map(newInstances)),
+    pages: serializeConfig<Pages>(data.pages),
+    breakpoints: serializeData<Breakpoint>(data.breakpoints),
+    styles: serializeStyles(data.styles),
+    styleSources: serializeData<StyleSource>(data.styleSources),
+    styleSourceSelections: serializeStyleSourceSelections(
+      data.styleSourceSelections
+    ),
+    props: serializeData<Prop>(data.props),
+    dataSources: serializeData<DataSource>(data.dataSources),
+    resources: serializeData<Resource>(data.resources),
+    instances: serializeData<Instance>(data.instances),
   });
   if (newBuild.error) {
     throw newBuild.error;

packages/project-build/src/template.tsx

@@ -0,0 +1,129 @@
+import { nanoid } from "nanoid";
+import {
+  initialBreakpoints,
+  type Pages,
+  type WebstudioData,
+} from "@webstudio-is/sdk";
+import { coreTemplates } from "@webstudio-is/sdk/core-templates";
+import { css, renderData, ws } from "@webstudio-is/template";
+import { createRootFolder } from "./shared/pages-utils";
+
+export const createPages = (): WebstudioData => {
+  const breakpoints = initialBreakpoints.map((breakpoint) => ({
+    ...breakpoint,
+    id: nanoid(),
+  }));
+  const homePageId = nanoid();
+  const homeBodyId = nanoid();
+  const notFoundPageId = nanoid();
+  const notFoundBodyId = nanoid();
+
+  const data = renderData(
+    <>
+      {/* home page body */}
+      <ws.element ws:tag="body" ws:id={homeBodyId}></ws.element>
+      {/* not found page body */}
+      <ws.element
+        ws:tag="body"
+        ws:id={notFoundBodyId}
+        ws:style={css`
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          background-color: #fff;
+        `}
+      >
+        <ws.element ws:tag="div">
+          <ws.element
+            ws:tag="div"
+            ws:style={css`
+              position: relative;
+              text-align: center;
+              font-weight: 900;
+              font-size: 8rem;
+              line-height: 1;
+              letter-spacing: -0.05em;
+            `}
+          >
+            <ws.element ws:tag="div">404</ws.element>
+            <ws.element
+              ws:tag="div"
+              ws:style={css`
+                position: absolute;
+                inset: 0 -0.125rem 0 0.125rem;
+                opacity: 0.3;
+              `}
+            >
+              404
+            </ws.element>
+            <ws.element
+              ws:tag="div"
+              ws:style={css`
+                position: absolute;
+                inset: 0 0.125rem 0 -0.125rem;
+                opacity: 0.3;
+              `}
+            >
+              404
+            </ws.element>
+            <ws.element
+              ws:tag="div"
+              ws:style={css`
+                position: absolute;
+                top: 50%;
+                left: 0;
+                width: 100%;
+                background-color: #fff;
+                height: 0.375rem;
+              `}
+            ></ws.element>
+          </ws.element>
+          <ws.element
+            ws:tag="p"
+            ws:style={css`
+              margin-top: 1.5rem;
+              font-weight: 700;
+              font-size: 1.5rem;
+              line-height: 2rem;
+              letter-spacing: 0.05em;
+            `}
+          >
+            PAGE NOT FOUND
+          </ws.element>
+        </ws.element>
+        {coreTemplates.builtWithWebstudio.template}
+      </ws.element>
+    </>,
+    nanoid,
+    breakpoints
+  );
+
+  const pages: Pages = {
+    homePage: {
+      id: homePageId,
+      name: "Home",
+      path: "",
+      title: `"Home"`,
+      meta: {},
+      rootInstanceId: homeBodyId,
+    },
+    pages: [
+      {
+        id: notFoundPageId,
+        name: "404",
+        path: "/*",
+        title: `"Page not found"`,
+        meta: {
+          status: `404`,
+          excludePageFromSearch: "false",
+        },
+        rootInstanceId: notFoundBodyId,
+      },
+    ],
+    folders: [createRootFolder([homePageId, notFoundPageId])],
+  };
+
+  return { ...data, pages };
+};
+
+createPages();

packages/template/src/jsx.ts

@@ -122,11 +122,12 @@ const getElementChildren = (element: JSX.Element): JSX.Element[] => {
 
 export const renderTemplate = (
   root: JSX.Element,
-  generateId?: () => string
+  generateId?: () => string,
+  initialBreakpoints: Breakpoint[] = []
 ): WebstudioFragment => {
   const instances: Instance[] = [];
   const props: Prop[] = [];
-  const breakpoints: Breakpoint[] = [];
+  const breakpoints = Array.from(initialBreakpoints);
   const styleSources: StyleSource[] = [];
   const styleSourceSelections: StyleSourceSelection[] = [];
   const styles: StyleDecl[] = [];
@@ -417,7 +418,8 @@ export const renderTemplate = (
 
 export const renderData = (
   root: JSX.Element,
-  generateId?: () => string
+  generateId?: () => string,
+  initialBreakpoints: Breakpoint[] = []
 ): Omit<WebstudioData, "pages"> => {
   const {
     instances,
@@ -429,7 +431,7 @@ export const renderData = (
     dataSources,
     resources,
     assets,
-  } = renderTemplate(root, generateId);
+  } = renderTemplate(root, generateId, initialBreakpoints);
   return {
     instances: new Map(instances.map((item) => [item.id, item])),
     props: new Map(props.map((item) => [item.id, item])),