payload 1.10.4 → 1.11.0

package/dist/webpack/getDevConfig.js

@@ -1,68 +1,68 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const webpack_1 = __importDefault(require("webpack"));
-const md5_1 = __importDefault(require("md5"));
-const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
-exports.default = (payloadConfig) => {
-    const baseConfig = (0, getBaseConfig_1.default)(payloadConfig);
-    let config = {
-        ...baseConfig,
-        cache: {
-            type: 'filesystem',
-            // version cache when there are changes to aliases
-            version: (0, md5_1.default)(Object.entries(baseConfig.resolve.alias).join()),
-            buildDependencies: {
-                config: [__filename],
-            },
-        },
-        entry: {
-            ...baseConfig.entry,
-            main: [
-                require.resolve('webpack-hot-middleware/client'),
-                ...baseConfig.entry.main,
-            ],
-        },
-        output: {
-            publicPath: payloadConfig.routes.admin,
-            path: '/',
-            filename: '[name].js',
-        },
-        devtool: 'inline-source-map',
-        mode: 'development',
-        stats: 'errors-warnings',
-        plugins: [
-            ...baseConfig.plugins,
-            new webpack_1.default.HotModuleReplacementPlugin(),
-        ],
-    };
-    config.module.rules.push({
-        test: /\.(scss|css)$/,
-        sideEffects: true,
-        use: [
-            require.resolve('style-loader'),
-            {
-                loader: require.resolve('css-loader'),
-                options: {
-                    url: (url) => (!url.startsWith('/')),
-                },
-            },
-            {
-                loader: require.resolve('postcss-loader'),
-                options: {
-                    postcssOptions: {
-                        plugins: [require.resolve('postcss-preset-env')],
-                    },
-                },
-            },
-            require.resolve('sass-loader'),
-        ],
-    });
-    if (payloadConfig.admin.webpack && typeof payloadConfig.admin.webpack === 'function') {
-        config = payloadConfig.admin.webpack(config);
-    }
-    return config;
-};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpack_1 = __importDefault(require("webpack"));
+const md5_1 = __importDefault(require("md5"));
+const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
+exports.default = (payloadConfig) => {
+    const baseConfig = (0, getBaseConfig_1.default)(payloadConfig);
+    let config = {
+        ...baseConfig,
+        cache: {
+            type: 'filesystem',
+            // version cache when there are changes to aliases
+            version: (0, md5_1.default)(Object.entries(baseConfig.resolve.alias).join()),
+            buildDependencies: {
+                config: [__filename],
+            },
+        },
+        entry: {
+            ...baseConfig.entry,
+            main: [
+                require.resolve('webpack-hot-middleware/client'),
+                ...baseConfig.entry.main,
+            ],
+        },
+        output: {
+            publicPath: payloadConfig.routes.admin,
+            path: '/',
+            filename: '[name].js',
+        },
+        devtool: 'inline-source-map',
+        mode: 'development',
+        stats: 'errors-warnings',
+        plugins: [
+            ...baseConfig.plugins,
+            new webpack_1.default.HotModuleReplacementPlugin(),
+        ],
+    };
+    config.module.rules.push({
+        test: /\.(scss|css)$/,
+        sideEffects: true,
+        use: [
+            require.resolve('style-loader'),
+            {
+                loader: require.resolve('css-loader'),
+                options: {
+                    url: (url) => (!url.startsWith('/')),
+                },
+            },
+            {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                    postcssOptions: {
+                        plugins: [require.resolve('postcss-preset-env')],
+                    },
+                },
+            },
+            require.resolve('sass-loader'),
+        ],
+    });
+    if (payloadConfig.admin.webpack && typeof payloadConfig.admin.webpack === 'function') {
+        config = payloadConfig.admin.webpack(config);
+    }
+    return config;
+};
 //# sourceMappingURL=getDevConfig.js.map

package/dist/webpack/getProdConfig.d.ts

@@ -1,4 +1,4 @@
-import { Configuration } from 'webpack';
-import { SanitizedConfig } from '../config/types';
-declare const _default: (payloadConfig: SanitizedConfig) => Configuration;
-export default _default;
+import { Configuration } from 'webpack';
+import { SanitizedConfig } from '../config/types';
+declare const _default: (payloadConfig: SanitizedConfig) => Configuration;
+export default _default;

package/dist/webpack/getProdConfig.js

@@ -1,73 +1,73 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
-const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
-const swc_minify_webpack_plugin_1 = require("swc-minify-webpack-plugin");
-const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
-exports.default = (payloadConfig) => {
-    const baseConfig = (0, getBaseConfig_1.default)(payloadConfig);
-    let config = {
-        ...baseConfig,
-        output: {
-            publicPath: `${payloadConfig.routes.admin}/`,
-            path: payloadConfig.admin.buildPath,
-            filename: '[name].[chunkhash].js',
-            chunkFilename: '[name].[chunkhash].js',
-        },
-        mode: 'production',
-        stats: 'errors-only',
-        optimization: {
-            minimizer: [new swc_minify_webpack_plugin_1.SwcMinifyWebpackPlugin()],
-            splitChunks: {
-                cacheGroups: {
-                    styles: {
-                        name: 'styles',
-                        test: /\.(sa|sc|c)ss$/,
-                        chunks: 'all',
-                        enforce: true,
-                    },
-                },
-            },
-        },
-        plugins: [
-            ...baseConfig.plugins,
-            new mini_css_extract_plugin_1.default({
-                filename: '[name].css',
-                ignoreOrder: true,
-            }),
-        ],
-    };
-    config.module.rules.push({
-        test: /\.(scss|css)$/,
-        sideEffects: true,
-        use: [
-            mini_css_extract_plugin_1.default.loader,
-            {
-                loader: require.resolve('css-loader'),
-                options: {
-                    url: (url) => (!url.startsWith('/')),
-                },
-            },
-            {
-                loader: require.resolve('postcss-loader'),
-                options: {
-                    postcssOptions: {
-                        plugins: [require.resolve('postcss-preset-env')],
-                    },
-                },
-            },
-            require.resolve('sass-loader'),
-        ],
-    });
-    if (process.env.PAYLOAD_ANALYZE_BUNDLE) {
-        config.plugins.push(new webpack_bundle_analyzer_1.BundleAnalyzerPlugin());
-    }
-    if (payloadConfig.admin.webpack && typeof payloadConfig.admin.webpack === 'function') {
-        config = payloadConfig.admin.webpack(config);
-    }
-    return config;
-};
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const mini_css_extract_plugin_1 = __importDefault(require("mini-css-extract-plugin"));
+const webpack_bundle_analyzer_1 = require("webpack-bundle-analyzer");
+const swc_minify_webpack_plugin_1 = require("swc-minify-webpack-plugin");
+const getBaseConfig_1 = __importDefault(require("./getBaseConfig"));
+exports.default = (payloadConfig) => {
+    const baseConfig = (0, getBaseConfig_1.default)(payloadConfig);
+    let config = {
+        ...baseConfig,
+        output: {
+            publicPath: `${payloadConfig.routes.admin}/`,
+            path: payloadConfig.admin.buildPath,
+            filename: '[name].[chunkhash].js',
+            chunkFilename: '[name].[chunkhash].js',
+        },
+        mode: 'production',
+        stats: 'errors-only',
+        optimization: {
+            minimizer: [new swc_minify_webpack_plugin_1.SwcMinifyWebpackPlugin()],
+            splitChunks: {
+                cacheGroups: {
+                    styles: {
+                        name: 'styles',
+                        test: /\.(sa|sc|c)ss$/,
+                        chunks: 'all',
+                        enforce: true,
+                    },
+                },
+            },
+        },
+        plugins: [
+            ...baseConfig.plugins,
+            new mini_css_extract_plugin_1.default({
+                filename: '[name].css',
+                ignoreOrder: true,
+            }),
+        ],
+    };
+    config.module.rules.push({
+        test: /\.(scss|css)$/,
+        sideEffects: true,
+        use: [
+            mini_css_extract_plugin_1.default.loader,
+            {
+                loader: require.resolve('css-loader'),
+                options: {
+                    url: (url) => (!url.startsWith('/')),
+                },
+            },
+            {
+                loader: require.resolve('postcss-loader'),
+                options: {
+                    postcssOptions: {
+                        plugins: [require.resolve('postcss-preset-env')],
+                    },
+                },
+            },
+            require.resolve('sass-loader'),
+        ],
+    });
+    if (process.env.PAYLOAD_ANALYZE_BUNDLE) {
+        config.plugins.push(new webpack_bundle_analyzer_1.BundleAnalyzerPlugin());
+    }
+    if (payloadConfig.admin.webpack && typeof payloadConfig.admin.webpack === 'function') {
+        config = payloadConfig.admin.webpack(config);
+    }
+    return config;
+};
 //# sourceMappingURL=getProdConfig.js.map

package/dist/webpack/init.d.ts

@@ -1,4 +1,4 @@
-import { Router } from 'express';
-import { SanitizedConfig } from '../config/types';
-declare function initWebpack(config: SanitizedConfig): Router;
-export default initWebpack;
+import { Router } from 'express';
+import { SanitizedConfig } from '../config/types';
+declare function initWebpack(config: SanitizedConfig): Router;
+export default initWebpack;

package/dist/webpack/init.js

@@ -1,22 +1,22 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const webpack_1 = __importDefault(require("webpack"));
-const express_1 = __importDefault(require("express"));
-const webpack_dev_middleware_1 = __importDefault(require("webpack-dev-middleware"));
-const webpack_hot_middleware_1 = __importDefault(require("webpack-hot-middleware"));
-const getDevConfig_1 = __importDefault(require("./getDevConfig"));
-const router = express_1.default.Router();
-function initWebpack(config) {
-    const webpackDevConfig = (0, getDevConfig_1.default)(config);
-    const compiler = (0, webpack_1.default)(webpackDevConfig);
-    router.use((0, webpack_dev_middleware_1.default)(compiler, {
-        publicPath: webpackDevConfig.output.publicPath,
-    }));
-    router.use((0, webpack_hot_middleware_1.default)(compiler));
-    return router;
-}
-exports.default = initWebpack;
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const webpack_1 = __importDefault(require("webpack"));
+const express_1 = __importDefault(require("express"));
+const webpack_dev_middleware_1 = __importDefault(require("webpack-dev-middleware"));
+const webpack_hot_middleware_1 = __importDefault(require("webpack-hot-middleware"));
+const getDevConfig_1 = __importDefault(require("./getDevConfig"));
+const router = express_1.default.Router();
+function initWebpack(config) {
+    const webpackDevConfig = (0, getDevConfig_1.default)(config);
+    const compiler = (0, webpack_1.default)(webpackDevConfig);
+    router.use((0, webpack_dev_middleware_1.default)(compiler, {
+        publicPath: webpackDevConfig.output.publicPath,
+    }));
+    router.use((0, webpack_hot_middleware_1.default)(compiler));
+    return router;
+}
+exports.default = initWebpack;
 //# sourceMappingURL=init.js.map

package/dist/webpack/mocks/dotENV.d.ts

@@ -1,4 +1,4 @@
-declare namespace _default {
-    function config(): any;
-}
-export default _default;
+declare namespace _default {
+    function config(): any;
+}
+export default _default;

package/dist/webpack/mocks/dotENV.js

@@ -1,6 +1,6 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = {
-    config: () => null,
-};
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    config: () => null,
+};
 //# sourceMappingURL=dotENV.js.map

package/dist/webpack/mocks/emptyModule.d.ts

@@ -1,2 +1,2 @@
-declare function _default(): void;
-export default _default;
+declare function _default(): void;
+export default _default;

package/dist/webpack/mocks/emptyModule.js

@@ -1,4 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = () => { };
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = () => { };
 //# sourceMappingURL=emptyModule.js.map

package/dist/webpack/mocks/fileMock.d.ts

@@ -1,2 +1,2 @@
-declare const _default: "file-stub";
-export default _default;
+declare const _default: "file-stub";
+export default _default;

package/dist/webpack/mocks/fileMock.js

@@ -1,4 +1,4 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = 'file-stub';
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = 'file-stub';
 //# sourceMappingURL=fileMock.js.map

package/docs/admin/components.mdx

@@ -11,10 +11,8 @@ While designing the Payload Admin panel, we determined it should be as minimal a
 To swap in your own React component, first, consult the list of available component overrides below. Determine the scope that corresponds to what you are trying to accomplish, and then author your React component accordingly.
 
 <Banner type="success">
-  <strong>Tip:</strong>
-  <br />
-  Custom components will automatically be provided with all props that the
-  default component would accept.
+  <strong>Tip:</strong><br />
+  Custom components will automatically be provided with all props that the default component would accept.
 </Banner>
 
 ### Base Component Overrides
@@ -85,14 +83,15 @@ You can override components on a Collection-by-Collection basis via each Collect
 | **`edit.SaveDraftButton`** | Replace the default `Save Draft` button with a custom component. Drafts must be enabled and autosave must be disabled. |
 | **`edit.PublishButton`**   | Replace the default `Publish` button with a custom component. Drafts must be enabled.                                  |
 | **`edit.PreviewButton`**   | Replace the default `Preview` button with a custom component.                                                          |
-| **`BeforeList`**   | Array of components to inject _before_ the built-in List view
-                                                         |
-| **`BeforeListTable`**   | Array of components to inject _before_ the built-in List view's table
-                                                         |
-| **`AfterListTable`**   | Array of components to inject _after_ the built-in List view's table
-                                                         |
-| **`AfterList`**   | Array of components to inject _after_ the built-in List view
-                                                         |
+| **`BeforeList`**           | Array of components to inject _before_ the built-in List view                                                          |
+|  |
+| **`BeforeListTable`**      | Array of components to inject _before_ the built-in List view's table                                                  |
+|  |
+| **`AfterListTable`**       | Array of components to inject _after_ the built-in List view's table                                                   |
+|  |
+| **`AfterList`**            | Array of components to inject _after_ the built-in List view                                                           |
+|  |
+
 #### Examples
 
 ```tsx
@@ -146,6 +145,7 @@ export const CustomPreviewButton: CustomPreviewButtonProps = ({
 ##### Custom Collection List View Example
 
 Collection.ts
+
 ```tsx
 import { MyListComponent } from './MyListComponent';
 export const MyCollection: CollectionConfig = {
@@ -164,12 +164,16 @@ export const MyCollection: CollectionConfig = {
 ```
 
 MyListComponent.tsx
+
 ```tsx
-import React from 'react';
-import {List, type Props} from 'payload/components/views/List' // Payload's default List view component and its props
+import React from "react";
+import { List, type Props } from "payload/components/views/List"; // Payload's default List view component and its props
 export const MyListComponent: React.FC<Props> = (props) => (
   <div>
-    <p>Some text before the default list view component. If you just want to do that, you can also use the admin.components.list.BeforeList hook</p>
+    <p>
+      Some text before the default list view component. If you just want to do
+      that, you can also use the admin.components.list.BeforeList hook
+    </p>
     <List {...props} />
   </div>
 );
@@ -260,11 +264,8 @@ const CustomTextField: React.FC<Props> = ({ path }) => {
 
 <Banner type="success">
   For more information regarding the hooks that are available to you while you
-  build custom components, including the <strong>useField</strong> hook,{" "}
-  <a href="/docs/admin/hooks" style={{ color: "black" }}>
-    click here
-  </a>
-  .
+  build custom components, including the <strong>useField</strong> hook, [click
+  here](/docs/admin/hooks).
 </Banner>
 
 ## Custom routes

package/docs/admin/overview.mdx

@@ -25,7 +25,7 @@ _Screenshot of the Admin panel while editing a document from an example `AllFiel
 All options for the Admin panel are defined in your base Payload config file.
 
 | Option                | Description                                                                                                                                                                                                                                                  |
-| --------------------- | -------------------------------------------------------------------------------------------------- |
+| --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --- |
 | `user`                | The `slug` of a Collection that you want be used to log in to the Admin dashboard. [More](/docs/admin/overview#the-admin-user-collection)                                                                                                                    |
 | `buildPath`           | Specify an absolute path for where to store the built Admin panel bundle used in production. Defaults to `path.resolve(process.cwd(), 'build')`.                                                                                                             |
 | `meta`                | Base meta data to use for the Admin panel. Included properties are `titleSuffix`, `ogImage`, and `favicon`.                                                                                                                                                  |
@@ -45,8 +45,8 @@ All options for the Admin panel are defined in your base Payload config file.
 <Banner type="warning">
   <strong>Important:</strong>
   <br />
-  The Payload Admin panel can only be used by one Collection that supports{" "}
-  <a href="/docs/authentication/overview">Authentication</a>.
+  The Payload Admin panel can only be used by one Collection that supports
+  [Authentication](/docs/authentication/overview).
 </Banner>
 
 To specify which Collection to use to log in to the Admin panel, pass the `admin` options a `user` key equal to the slug of the Collection that you'd like to use.

package/docs/cloud/configuration.mdx

@@ -0,0 +1,62 @@
+---
+title: Project Configuration
+label: Configuration
+order: 20
+desc: Quickly configure and deploy your Payload Cloud project in a few simple steps.
+keywords: configuration, config, settings, project, cloud, payload cloud, deploy, deployment
+---
+
+### Select your plan
+
+Once you have created a project, you will need to select your plan. This will determine the resources that are allocated to your project and the features that are available to you.
+
+<Banner type="success">
+  Note: All Payload Cloud teams that deploy a project require a card on file.
+  This helps us prevent fraud and abuse on our platform. If you select a plan
+  with a free trial, You will not be charged until your trial period is over.
+  We’ll remind you 7 days before your trial ends and you can cancel anytime.
+</Banner>
+
+### Project Details
+
+| Option           | Description                                                                                                                                                                                                                                    |
+| ---------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Region**       | Select the region closest to your audience. This will ensure the fastest communication between your data and your client.                                                                                                                      |
+| **Project Name** | A name for your project. You can change this at any time.                                                                                                                                                                                      |
+| **Project Slug** | Choose a unique slug to identify your project. This needs to be unique for your team and you can change it any time.                                                                                                                           |
+| **Team**         | Select the team you want to create the project under. If this is your first project, a personal team will be created for your automatically. You can modify your team settings and invite new members at any time from the Team Settings page. |
+
+### Build Settings
+
+If you are deploying a new project from a template, the following settings will all be automatically configured for you. If you are using your own repository, you will need to make sure your build settings are accurate for your project to deploy correctly.
+
+| Option               | Description                                                                                                                                                       |
+| -------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Root Directory**   | The folder where your `package.json` file lives.                                                                                                                  |
+| **Install Command**  | The command used to install your modules, for example: `yarn install` or `npm install`                                                                            |
+| **Build Command**    | The command used to build your application, for example: `yarn build` or `npm run build`                                                                          |
+| **Serve Command**    | The command used to serve your application, for example: `yarn serve` or `npm run serve`                                                                          |
+| **Branch to Deploy** | Select the branch of your repository that you want to deploy from. This is the branch that will be used to build your project when you commit new changes.        |
+| **Default Domain**   | Set a default domain for your project. This must be unique and you will not able to change it. You can always add a custom domain later in your project settings. |
+
+### Environment Variables
+
+Any of the features in Payload Cloud that require environment variables will automatically be provided to your application. If your app requires any custom environment variables, you can set them here.
+
+<Banner type="warning">
+  Note: For security reasons, any variables you wish to provide to the Admin
+  panel must be prefixed with `PAYLOAD_PUBLIC_`.  Learn more
+  [here](https://payloadcms.com/docs/admin/webpack#admin-environment-vars).
+</Banner>
+
+### Payment
+
+Payment methods can be set per project and can be updated any time. You can use team’s default payment method, or add a new one. Modify your payment methods in your Project settings / Team settings.
+
+<Banner type="success">
+  <strong>Note:</strong> All Payload Cloud teams that deploy a project require a
+  card on file. This helps us prevent fraud and abuse on our platform. If you
+  select a plan with a free trial, You will not be charged until your trial
+  period is over. We’ll remind you 7 days before your trial ends and you can
+  cancel anytime.
+</Banner>

package/docs/cloud/creating-a-project.mdx

@@ -0,0 +1,53 @@
+---
+title: Getting Started
+label: Getting Started
+order: 10
+desc: Get started with Payload Cloud, a deployment solution specifically designed for Node + MongoDB applications.
+keywords: cloud, hosted, database, storage, email, deployment, serverless, node, mongodb, s3, aws, cloudflare, atlas, resend, payload, cms
+---
+
+A deployment solution specifically designed for Node + MongoDB applications, offering seamless deployment of your entire stack in one place. You can get started in minutes with a one-click template, or bring your own codebase with you.
+
+Payload Cloud offers different plans tailored to meet your specific needs, including a MongoDB Atlas database, S3 file storage, and email delivery powered by Resend. To see the full breakdown of features and plans, see our [Cloud Pricing page](https://payloadcms.com/cloud-pricing).
+
+To get started, you will first need to create an account. Head over to [the login screen](https://payloadcms.com/login) and **Register for Free**.
+
+<Banner type="success">
+  To create your first project, you can either select [a
+  template](#starting-from-a-template), or [import an existing
+  project](#importing-from-an-existing-codebase) from GitHub.
+</Banner>
+
+## Starting from a Template
+
+Templates come preconfigured and provide a one-click, simple solution to quickly deploy a new application.
+
+![Screen for creating a new project from a template](https://payloadcms.com/images/docs/cloud/create-from-template.jpg)
+_Creating a new project from a template._
+
+After creating an account, select your desired template from the Projects page. At this point, you will need to connect to Authorize the Payload Cloud application with your GitHub account. Click Continue with GitHub and follow the prompts to authorize the app.
+
+Next, select your `GitHub Scope`. If you belong to multiple organizations they will show up here. If do not see the organization you are looking for, you may need to adjust your GitHub app permissions.
+
+After selecting your scope, create a unique `repository name` and select whether you want your repository to be public or private on GitHub.
+
+<Banner type="warning">
+  <strong>Note:</strong> Public repositories can be accessed by anyone online,
+  while private repositories only grant access to you and anyone you explicitly
+  authorize.
+</Banner>
+
+Once you are ready, click **Create Project**. This will clone the selected template to a new respository in your GitHub account, and take you to the configuration page to set up your project for deployment.
+
+## Importing from an Existing Codebase
+
+Payload Cloud works for any Node + MongoDB app. From the New Project page, select **import an existing Git codebase**. Choose the organization and select the repository you want to import. From here, you will be taken to the configuration page to set up your project for deployment.
+
+![Screen for creating a new project from an existing repository](https://payloadcms.com/images/docs/cloud/create-from-existing.jpg)
+_Creating a new project from an existing repository._
+
+<Banner type="warning">
+  <strong>Note:</strong> In order to make use of the features of Payload Cloud
+  in your own codebase, you will need to add the [Cloud
+  Plugin](https://github.com/payloadcms/plugin-cloud) to your Payload app.
+</Banner>