Merge pull request #250 from akd-io/feature/247-add-support-for-netlify

Add support for Vercel and Netlify

Author: akd-io

apps/website/templates/LandingPage/components/TechnologiesForm.tsx

@@ -45,6 +45,8 @@ type OptionKey =
   | "formattingPreCommitHook"
   | "reactQuery"
   | "plausible"
+  | "vercel"
+  | "netlify"
 
 const options = {
   pnpm: { key: "pnpm", value: "pnpm", label: "pnpm" },
@@ -112,6 +114,16 @@ const options = {
     value: "plausible",
     label: "Plausible",
   },
+  vercel: {
+    key: "vercel",
+    value: "vercel",
+    label: "Vercel",
+  },
+  netlify: {
+    key: "netlify",
+    value: "netlify",
+    label: "Netlify",
+  },
 } satisfies {
   [Key in OptionKey]: {
     key: Key
@@ -157,6 +169,10 @@ const serverStateManagementLibraryOptionKeys = [
   optionKeys.reactQuery,
 ] satisfies OptionKey[]
 const analyticsOptionKeys = [optionKeys.plausible] satisfies OptionKey[]
+const deploymentOptionKeys = [
+  optionKeys.vercel,
+  optionKeys.netlify,
+] satisfies OptionKey[]
 
 type ProjectName = string
 type PackageManager = (typeof packageManagerOptionKeys)[number]
@@ -170,6 +186,7 @@ type ContinuousIntegration = (typeof continuousIntegrationOptionKeys)[number]
 type ServerStateManagementLibrary =
   (typeof serverStateManagementLibraryOptionKeys)[number]
 type Analytics = (typeof analyticsOptionKeys)[number]
+type Deployment = (typeof deploymentOptionKeys)[number]
 
 type TechnologiesFormData = {
   projectName: ProjectName
@@ -183,6 +200,7 @@ type TechnologiesFormData = {
   continuousIntegration: ContinuousIntegration[]
   serverStateManagementLibraries: ServerStateManagementLibrary[]
   analytics: Analytics[]
+  deployment: Deployment[]
 }
 const defaultFormData: TechnologiesFormData = {
   projectName: "my-app",
@@ -196,6 +214,7 @@ const defaultFormData: TechnologiesFormData = {
   continuousIntegration: [optionKeys.githubActions],
   serverStateManagementLibraries: [optionKeys.reactQuery],
   analytics: [],
+  deployment: [optionKeys.vercel],
 }
 const formDataKeys = objectToKeyToKeyMap(defaultFormData)
 
@@ -213,6 +232,7 @@ const categoryLabels = {
   continuousIntegration: "Continuous Integration",
   serverStateManagementLibraries: "Server State Management",
   analytics: "Analytics",
+  deployment: "Deployment",
 } as const
 
 export const TechnologiesForm: React.FC = () => {
@@ -250,6 +270,7 @@ export const TechnologiesForm: React.FC = () => {
       pushArgs(formData.continuousIntegration)
       pushArgs(formData.serverStateManagementLibraries)
       pushArgs(formData.analytics)
+      pushArgs(formData.deployment)
 
       const projectNameSegments = formData.projectName.split("/")
       const lastPartOfProjectName = projectNameSegments.pop()!
@@ -271,7 +292,8 @@ export const TechnologiesForm: React.FC = () => {
       | "animation"
       | "continuousIntegration"
       | "serverStateManagementLibraries"
-      | "analytics",
+      | "analytics"
+      | "deployment",
     optionKeys: Array<keyof typeof options>,
     validators?: {
       [key in keyof typeof options]?: Array<{
@@ -567,6 +589,16 @@ export const TechnologiesForm: React.FC = () => {
                   continuousIntegrationOptionKeys
                 )}
               </Flex>
+
+              <Flex direction="column" gap="4">
+                <Heading as="h3" size="md">
+                  {categoryLabels.deployment}
+                </Heading>
+                {CheckboxesOfOptionKeys(
+                  formDataKeys.deployment,
+                  deploymentOptionKeys
+                )}
+              </Flex>
             </Flex>
           </Flex>
 

packages/create-next-stack/README.md

@@ -62,6 +62,8 @@ The table below provides an overview of the technologies currently supported by
 | GitHub Actions      | [Website](https://github.com/features/actions) - [Docs](https://docs.github.com/en/actions) - [Workflow syntax](https://docs.github.com/en/actions/reference/workflow-syntax-for-github-actions)                             |
 | Plausible Analytics | [Website](https://plausible.io/) - [Docs](https://plausible.io/docs) - [GitHub](https://github.com/plausible/analytics)                                                                                                      |
 | next-plausible      | [Website](https://next-plausible.vercel.app/) - [GitHub](https://github.com/4lejandrito/next-plausible)                                                                                                                      |
+| Vercel              | [Website](https://vercel.com/) - [Docs](https://vercel.com/docs) - [CLI Docs](https://vercel.com/docs/cli)                                                                                                                   |
+| Netlify             | [Website](https://www.netlify.com/) - [Docs](https://docs.netlify.com/) - [CLI Docs](https://cli.netlify.com/)                                                                                                               |
 
 <!-- CNS-END-OF-TECHNOLOGIES-TABLE -->
 
@@ -96,6 +98,7 @@ FLAGS
                                 Emotion)
   --material-ui                 Adds Material UI. (Component library) (Requires
                                 Emotion)
+  --netlify                     Adds Netlify. (Hosting)
   --package-manager=<option>    (required) Sets the preferred package manager.
                                 (Required)
                                 <options: pnpm|yarn|npm>
@@ -109,6 +112,7 @@ FLAGS
                                 (Required) <styling-method> =
                                 emotion|styled-components|tailwind-css|css-modul
                                 es|css-modules-with-sass
+  --vercel                      Adds Vercel. (Hosting)
 ```
 
 <!-- CNS-END-OF-HELP-OUTPUT -->

packages/create-next-stack/src/main/commands/create-next-stack.ts

@@ -104,6 +104,14 @@ export default class CreateNextStack extends Command {
     plausible: Flags.boolean({
       description: "Adds Plausible. (Analytics)",
     }),
+
+    // Hosting
+    netlify: Flags.boolean({
+      description: "Adds Netlify. (Hosting)",
+    }),
+    vercel: Flags.boolean({
+      description: "Adds Vercel. (Hosting)",
+    }),
   }
 
   async run(): Promise<void> {

packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/scripts.ts

@@ -12,6 +12,8 @@ export const scriptsSortOrder: string[] = [
   "lint",
   "format",
   "format:check",
+  "deploy:vercel",
+  "deploy:netlify",
 ]
 
 export const getSortedFilteredScripts = (inputs: ValidCNSInputs) => {

packages/create-next-stack/src/main/plugins/create-next-stack/sort-orders/technologies.ts

@@ -32,6 +32,8 @@ export const technologiesSortOrder: string[] = [
   "githubActions",
   "plausible",
   "nextPlausible",
+  "vercel",
+  "netlify",
 ]
 
 export const getTechnologies = (

packages/create-next-stack/src/main/plugins/netlify.ts

@@ -0,0 +1,37 @@
+import { createPlugin } from "../plugin"
+
+export const netlifyPlugin = createPlugin({
+  id: "netlify",
+  name: "Netlify",
+  description: "Adds support for Netlify",
+  active: ({ flags }) => Boolean(flags["netlify"]),
+  devDependencies: {
+    "netlify-cli": {
+      name: "netlify-cli",
+      version: "^15.6.0",
+    },
+  },
+  scripts: [
+    {
+      name: "deploy:netlify",
+      command: "netlify deploy",
+      description: "Deploy a preview deployment to Netlify",
+    },
+  ],
+  technologies: [
+    {
+      id: "netlify",
+      name: "Netlify",
+      description:
+        "Netlify is a modern hosting platform for websites and web apps. With zero configuration, it will build and deploy your site globally and serverlessly with a single command. It can also be set up to do continuous deployments by integrating it with your repository host.",
+      links: [
+        { title: "Website", url: "https://www.netlify.com/" },
+        { title: "Docs", url: "https://docs.netlify.com/" },
+        { title: "CLI Docs", url: "https://cli.netlify.com/" },
+      ],
+    },
+  ],
+  todos: [
+    "Integrate Netlify with your repository host for continuous deployments at https://app.netlify.com/start. The Netlify CLI, mainly used for preview deployments, won't auto-detect Next.js until you do.",
+  ],
+} as const)

packages/create-next-stack/src/main/plugins/vercel.ts

@@ -0,0 +1,37 @@
+import { createPlugin } from "../plugin"
+
+export const vercelPlugin = createPlugin({
+  id: "vercel",
+  name: "Vercel",
+  description: "Adds support for Vercel",
+  active: ({ flags }) => Boolean(flags["vercel"]),
+  devDependencies: {
+    vercel: {
+      name: "vercel",
+      version: "^30.2.2",
+    },
+  },
+  scripts: [
+    {
+      name: "deploy:vercel",
+      command: "vercel",
+      description: "Deploy a preview deployment to Vercel",
+    },
+  ],
+  technologies: [
+    {
+      id: "vercel",
+      name: "Vercel",
+      description:
+        "Vercel is a modern hosting platform for websites and web apps. With zero configuration, it will build and deploy your site globally and serverlessly with a single command. It can also be set up to do continuous deployments by integrating it with your repository host.",
+      links: [
+        { title: "Website", url: "https://vercel.com/" },
+        { title: "Docs", url: "https://vercel.com/docs" },
+        { title: "CLI Docs", url: "https://vercel.com/docs/cli" },
+      ],
+    },
+  ],
+  todos: [
+    "Integrate Vercel with your repository host for continuous deployments at https://vercel.com/new",
+  ],
+} as const)

packages/create-next-stack/src/main/setup/setup.ts

@@ -17,6 +17,7 @@ import { framerMotionPlugin } from "../plugins/framer-motion"
 import { githubActionsPlugin } from "../plugins/github-actions"
 import { mantinePlugin } from "../plugins/mantine/mantine"
 import { materialUIPlugin } from "../plugins/material-ui/material-ui"
+import { netlifyPlugin } from "../plugins/netlify"
 import { nextPlugin } from "../plugins/next"
 import { npmPlugin } from "../plugins/npm"
 import { plausiblePlugin } from "../plugins/plausible"
@@ -30,6 +31,7 @@ import { sassPlugin } from "../plugins/sass/sass"
 import { styledComponentsPlugin } from "../plugins/styled-components"
 import { tailwindCSSPlugin } from "../plugins/tailwind-css"
 import { typescriptPlugin } from "../plugins/typescript"
+import { vercelPlugin } from "../plugins/vercel"
 import { yarnPlugin } from "../plugins/yarn"
 import { steps } from "../steps"
 import { printFinalMessages } from "./print-final-messages"
@@ -60,6 +62,8 @@ export const plugins: Plugin[] = [
   reactIconsPlugin,
   reactQueryPlugin,
   plausiblePlugin,
+  vercelPlugin,
+  netlifyPlugin,
 ]
 
 export const filterPlugins = (inputs: ValidCNSInputs): Plugin[] =>

packages/create-next-stack/src/tests/e2e/tests/css-modules-with-sass/css-modules-with-sass-all-flags.test.ts

@@ -17,6 +17,8 @@ test(
       "--react-icons",
       "--react-query",
       "--plausible",
+      "--vercel",
+      "--netlify",
       ".",
     ])
   },

packages/create-next-stack/src/tests/e2e/tests/css-modules/css-modules-all-flags.test.ts

@@ -17,6 +17,8 @@ test(
       "--react-icons",
       "--react-query",
       "--plausible",
+      "--vercel",
+      "--netlify",
       ".",
     ])
   },