Skip to content

feat: drop legacy CLI templates #4867

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Feb 16, 2025
Merged

feat: drop legacy CLI templates #4867

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
954e3f3
feat: drop legacy CLI templates
TrySound Feb 13, 2025
b002f14
Fix types
TrySound Feb 13, 2025
44af576
Split vanilla into static and docker
TrySound Feb 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
294 changes: 150 additions & 144 deletions apps/builder/app/builder/features/topbar/publish.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,6 @@ import {
import { AddDomain } from "./add-domain";
import { humanizeString } from "~/shared/string-utils";
import { trpcClient, nativeClient } from "~/shared/trpc/trpc-client";
import { isFeatureEnabled } from "@webstudio-is/feature-flags";
import type { Templates } from "@webstudio-is/sdk";
import DomainCheckbox, { domainToPublishName } from "./domain-checkbox";
import { CopyToClipboard } from "~/builder/shared/copy-to-clipboard";
Expand Down Expand Up @@ -641,30 +640,38 @@ const Content = (props: {
);
};

const deployTargets = {
vanilla: {
type DeployTarget = {
docs?: string;
command?: string;
ssgTemplates?: Templates[];
};

const deployTargets: Record<string, DeployTarget> = {
docker: {
docs: "https://docs.docker.com",
command: `
npm install
npm run dev
docker build -t my-image .
docker run my-image
`,
docs: "https://remix.run/",
},
static: {
ssgTemplates: ["ssg"],
},
vercel: {
command: "npx vercel@latest",
docs: "https://vercel.com/docs/cli",
command: "npx vercel@latest",
ssgTemplates: ["ssg-vercel"],
},
netlify: {
docs: "https://docs.netlify.com/cli/get-started/",
command: `
npx netlify-cli@latest login
npx netlify-cli sites:create
npx netlify-cli build
npx netlify-cli deploy`,
docs: "https://docs.netlify.com/cli/get-started/",
ssgTemplates: ["ssg-netlify"],
},
} as const;
};

type DeployTargets = keyof typeof deployTargets;

Expand All @@ -673,7 +680,7 @@ const isDeployTargets = (value: string): value is DeployTargets =>

const ExportContent = (props: { projectId: Project["id"] }) => {
const npxCommand = "npx webstudio@latest";
const [deployTarget, setDeployTarget] = useState<DeployTargets>("vanilla");
const [deployTarget, setDeployTarget] = useState<DeployTargets>("docker");

return (
<Grid columns={1} gap={3} css={{ padding: theme.panel.padding }}>
Expand All @@ -698,152 +705,151 @@ const ExportContent = (props: { projectId: Project["id"] }) => {
</Grid>
</Grid>

<Grid columns={1} gap={1}>
{isFeatureEnabled("staticExport") && (
<>
<PublishStatic
projectId={props.projectId}
templates={deployTargets[deployTarget].ssgTemplates}
/>
<div />
<Text color="subtle">
Learn about deploying static sites{" "}
<Link
variant="inherit"
color="inherit"
href="https://wstd.us/ssg"
target="_blank"
rel="noreferrer"
>
here
</Link>
</Text>

<div />
<div />
<Grid
gap={2}
align={"center"}
css={{
gridTemplateColumns: `1fr auto 1fr`,
}}
>
<Separator css={{ alignSelf: "unset" }} />
<Text color="main">CLI</Text>
<Separator css={{ alignSelf: "unset" }} />
</Grid>
</>
)}

<Text color="main" variant="labelsTitleCase">
Step 1
</Text>
<Text color="subtle">
Download and install Node v20+ from{" "}
<Link
variant="inherit"
color="inherit"
href="https://nodejs.org/"
target="_blank"
rel="noreferrer"
>
nodejs.org
</Link>{" "}
or with{" "}
<Link
variant="inherit"
color="inherit"
href="https://nodejs.org/en/download/package-manager"
target="_blank"
rel="noreferrer"
>
a package manager
</Link>
.
</Text>
</Grid>

<Grid columns={1} gap={2}>
{deployTargets[deployTarget].ssgTemplates && (
<Grid columns={1} gap={1}>
<Text color="main" variant="labelsTitleCase">
Step 2
</Text>
<Text color="subtle">
Run this command in your Terminal to install Webstudio CLI and sync
your project.
</Text>
</Grid>

<Flex gap={2}>
<InputField
css={{ flex: 1 }}
text="mono"
readOnly
value={npxCommand}
<PublishStatic
projectId={props.projectId}
templates={deployTargets[deployTarget].ssgTemplates}
/>

<CopyToClipboard text={npxCommand}>
<Button type="button" color="neutral" prefix={<CopyIcon />}>
Copy
</Button>
</CopyToClipboard>
</Flex>
</Grid>
<Grid columns={1} gap={2}>
<Grid columns={1} gap={1}>
<Text color="main" variant="labelsTitleCase">
Step 3
</Text>
<div />
<Text color="subtle">
Run this command to publish to{" "}
Learn about deploying static sites{" "}
<Link
variant="inherit"
color="inherit"
href={deployTargets[deployTarget].docs}
href="https://wstd.us/ssg"
target="_blank"
rel="noreferrer"
>
{humanizeString(deployTarget)}
</Link>{" "}
here
</Link>
</Text>
</Grid>

<Flex gap={2} align="end">
<TextArea
css={{ flex: 1 }}
variant="mono"
readOnly
value={stripIndent(deployTargets[deployTarget].command)
.trimStart()
.replace(/ +$/, "")}
/>

<CopyToClipboard text={deployTargets[deployTarget].command}>
<Button
type="button"
css={{ flexShrink: 0 }}
color="neutral"
prefix={<CopyIcon />}
>
Copy
</Button>
</CopyToClipboard>
</Flex>
</Grid>
<Grid columns={1} gap={1}>
<Text color="subtle">
Read the detailed documentation{" "}
<Link
variant="inherit"
color="inherit"
href="https://wstd.us/cli"
target="_blank"
rel="noreferrer"
)}

{deployTargets[deployTarget].command && (
<Grid columns={1} gap={2}>
<Grid
gap={2}
align={"center"}
css={{
gridTemplateColumns: `1fr auto 1fr`,
}}
>
here
</Link>
</Text>
</Grid>
<Separator css={{ alignSelf: "unset" }} />
<Text color="main">CLI</Text>
<Separator css={{ alignSelf: "unset" }} />
</Grid>
<Grid columns={1} gap={1}>
<Text color="main" variant="labelsTitleCase">
Step 1
</Text>
<Text color="subtle">
Download and install Node v20+ from{" "}
<Link
variant="inherit"
color="inherit"
href="https://nodejs.org/"
target="_blank"
rel="noreferrer"
>
nodejs.org
</Link>{" "}
or with{" "}
<Link
variant="inherit"
color="inherit"
href="https://nodejs.org/en/download/package-manager"
target="_blank"
rel="noreferrer"
>
a package manager
</Link>
.
</Text>
</Grid>

<Grid columns={1} gap={2}>
<Grid columns={1} gap={1}>
<Text color="main" variant="labelsTitleCase">
Step 2
</Text>
<Text color="subtle">
Run this command in your Terminal to install Webstudio CLI and
sync your project.
</Text>
</Grid>
<Flex gap={2}>
<InputField
css={{ flex: 1 }}
text="mono"
readOnly
value={npxCommand}
/>
<CopyToClipboard text={npxCommand}>
<Button type="button" color="neutral" prefix={<CopyIcon />}>
Copy
</Button>
</CopyToClipboard>
</Flex>
</Grid>

<Grid columns={1} gap={2}>
<Grid columns={1} gap={1}>
<Text color="main" variant="labelsTitleCase">
Step 3
</Text>
<Text color="subtle">
Run this command to publish to{" "}
<Link
variant="inherit"
color="inherit"
href={deployTargets[deployTarget].docs}
target="_blank"
rel="noreferrer"
>
{humanizeString(deployTarget)}
</Link>{" "}
</Text>
</Grid>
<Flex gap={2} align="end">
<TextArea
css={{ flex: 1 }}
variant="mono"
readOnly
value={stripIndent(deployTargets[deployTarget].command)
.trimStart()
.replace(/ +$/, "")}
/>
<CopyToClipboard text={deployTargets[deployTarget].command}>
<Button
type="button"
css={{ flexShrink: 0 }}
color="neutral"
prefix={<CopyIcon />}
>
Copy
</Button>
</CopyToClipboard>
</Flex>
</Grid>

<Grid columns={1} gap={1}>
<Text color="subtle">
Read the detailed documentation{" "}
<Link
variant="inherit"
color="inherit"
href="https://wstd.us/cli"
target="_blank"
rel="noreferrer"
>
here
</Link>
</Text>
</Grid>
</Grid>
)}
</Grid>
);
};
Expand Down
10 changes: 0 additions & 10 deletions packages/cli/src/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,11 +53,6 @@ export const jsonToGlobalConfig = (json: unknown) => {
export type GlobalConfig = z.infer<typeof zGlobalConfig>;

export const PROJECT_TEMPLATES = [
{
value: "vanilla" as const,
label: "Vanilla",
expand: ["defaults"],
},
{
value: "docker" as const,
label: "Docker",
Expand All @@ -68,11 +63,6 @@ export const PROJECT_TEMPLATES = [
label: "Vercel",
expand: ["react-router", "react-router-vercel"],
},
{
value: "vercel-legacy" as const,
label: "Vercel (legacy)",
expand: ["defaults", "vercel"],
},
{
value: "netlify" as const,
label: "Netlify",
Expand Down
1 change: 0 additions & 1 deletion packages/feature-flags/src/flags.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ export const aiRadixComponents = false;
export const cms = false;
export const filters = false;
export const xmlElement = false;
export const staticExport = false;
export const contentEditableMode = false;
export const command = false;
export const headSlotComponent = false;
Expand Down
2 changes: 0 additions & 2 deletions packages/sdk/src/schema/deployment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,8 @@
import { z } from "zod";

export const Templates = z.enum([
"vanilla",
"docker",
"vercel",
"vercel-legacy",
"netlify",
"ssg",
"ssg-netlify",
Expand Down
Loading