feat: create projects with 404 page on all plans

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/src/db/build.ts

@@ -21,13 +21,15 @@ import {
   Pages,
   initialBreakpoints,
   elementComponent,
+  HomePage,
+  type Page,
 } 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 { createRootFolder } from "../shared/pages-utils";
 
 const parseCompactData = <Item>(serialized: string) =>
   JSON.parse(serialized) as Item[];
@@ -222,22 +224,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();
@@ -263,16 +249,58 @@ export const createBuild = async (
   },
   context: AppContext
 ): Promise<void> => {
-  const newInstances = createNewPageInstances();
-  const [rootInstanceId] = newInstances[0];
-  const defaultPages = createDefaultPages({ rootInstanceId });
-
+  // Home page
+  const homeBodyInstance: Instance = {
+    type: "instance",
+    id: nanoid(),
+    component: elementComponent,
+    tag: "body",
+    children: [],
+  };
+  const homePage: HomePage = {
+    id: nanoid(),
+    name: "Home",
+    path: "",
+    title: `"Home"`,
+    meta: {},
+    rootInstanceId: homeBodyInstance.id,
+  };
+  // Not Found page
+  const notFoundBodyInstance: Instance = {
+    type: "instance",
+    id: nanoid(),
+    component: elementComponent,
+    tag: "body",
+    children: [{ type: "text", value: "404 Not Found" }],
+  };
+  const notFoundPage: Page = {
+    id: nanoid(),
+    name: "Not Found",
+    path: "/*",
+    title: `"Not Found"`,
+    meta: {
+      status: `404`,
+    },
+    rootInstanceId: notFoundBodyInstance.id,
+  };
+  // This is a root folder that nobody can delete or going to be able to see.
+  const rootFolder = createRootFolder([homePage.id, notFoundPage.id]);
+  const pages = {
+    meta: {},
+    homePage,
+    pages: [notFoundPage],
+    folders: [rootFolder],
+  };
+  const newInstances = new Map([
+    [homeBodyInstance.id, homeBodyInstance],
+    [notFoundBodyInstance.id, notFoundBodyInstance],
+  ]);
   const newBuild = await context.postgrest.client.from("Build").insert({
     id: crypto.randomUUID(),
     projectId: props.projectId,
-    pages: serializePages(defaultPages),
+    pages: serializePages(pages),
     breakpoints: serializeData<Breakpoint>(new Map(createInitialBreakpoints())),
-    instances: serializeData<Instance>(new Map(newInstances)),
+    instances: serializeData<Instance>(newInstances),
   });
   if (newBuild.error) {
     throw newBuild.error;

packages/sdk/src/schema/pages.ts

@@ -83,11 +83,13 @@ export const HomePagePath = z
   .string()
   .refine((path) => path === "", "Home page path must be empty");
 
-const HomePage = z.object({
+export const HomePage = z.object({
   ...commonPageFields,
   path: HomePagePath,
 });
 
+export type HomePage = z.infer<typeof HomePage>;
+
 const DefaultPagePage = z
   .string()
   .refine((path) => path !== "", "Can't be empty")