# Set up a custom Git repository Set up a custom Git repository for your commercetools Frontend project. Before moving your project to a custom Git repository, you must contact the [commercetools support team](https://support.commercetools.com/). ## Prerequisites To set up a Git repository for your commercetools Frontend project, you need the following: - The latest version of the [CLI](/frontend-development/cli.md) installed - [Git](https://git-scm.com/) installed - A [Studio API key](/frontend-studio/using-the-api-keys-area.md) with the `build-upload` scope ## Set up a new project To set up a Git repository for your commercetools Frontend project, follow these steps: 1. Create a directory for your project using the terminal by running the following command. For `PROJECT_NAME`, you can specify any name of your choice. ```bash title="Create project directory" mkdir PROJECT_NAME ``` 2. Change the working directory to the new directory by running the following command: ```bash title="Move into project directory" cd PROJECT_NAME ``` 3. Initialize the Git repository by running the following command: ```bash title="Initialize Git repository" git init ``` 4. Scaffold your commercetools Frontend project by running the following command. For `PROJECT_ID`, you must provide the unique ID of your Frontend project that you received from commercetools. ```bash title="Scaffold your B2C-only commercetools Frontend project" frontastic scaffold CUSTOMER_NAME PROJECT_ID ``` ```bash title="Scaffold your B2B-only commercetools Frontend project" frontastic scaffold CUSTOMER_NAME PROJECT_ID --edition b2b ``` 5. Add and commit your code by running the following commands: ```bash title="Create your first commit" git add . && git commit -m "Initial commit" ``` 6. Create the remote repository using [git remote](https://git-scm.com/docs/git-remote). You can now push, pull, and fetch to or from your remote repository. ## Build your project To deploy your project, you need to build the application into [JavaScript bundles](https://webpack.js.org/concepts/#output). You can do this locally or in a continuous integration (CI) environment. ### Backend extensions To build the backend [extensions](/frontend-development/extensions.md), follow these steps: 1. Run `yarn install` in the `packages/PROJECT_ID/backend` directory. 2. Run `yarn build` in the `packages/PROJECT_ID/backend` directory. After the `yarn build` command has finished running, the `bundle.min.js` and `bundle.min.js.map` build artifacts will be available at this path: `packages/PROJECT_ID/backend/build/`. ### Frontend website [Netlify](https://www.netlify.com/) builds and deploys your frontend website separately from the backend extensions. For further information about Netlify deployments, see [Deploy frontend](/frontend-development/set-up-custom-repository.md#deploy-frontend). ## Deploy your project ### Deploy backend extensions To deploy the backend extensions, you must upload the backend build to the Studio using the [CLI](/frontend-development/cli.md). To do so, follow these steps: 1. To protect the Studio API key from being exposed in the shell logs, set the API credentials as environment variables by running the following commands. ```console title="Set environment variables in the shell for authentication" export FRONTASTIC_CLI_CLIENT_ID= export FRONTASTIC_CLI_CLIENT_SECRET= ``` Replace the following: - `API_ID` - String - Required. The ID of the [Studio API key](/frontend-studio/using-the-api-keys-area.md). - `API_KEY` - String - Required. The Studio API key. 2. Run the `upload` command from your project directory. ```console noPromptLines="2-15" title="Upload the build using the upload command" frontastic upload --project PROJECT_ID --branch BRANCH --revision REVISION --nodeJsVersion NODE_JS_VERSION --buildSuccessful BUILD_SUCCESSFUL --buildTime BUILD_TIME --buildDuration BUILD_DURATION --buildLog BUILD_LOG --deploy SHOULD_DEPLOY --extensionBundleFilePath BUNDLE_PATH --extensionBundleMapFilePath BUNDLE_MAP_PATH --url STUDIO_URL / ``` Replace the following: - `PROJECT_ID` - String - Required. The unique ID of your commercetools Frontend project. - `BRANCH` - String - Required. The name of the Git branch used to build the uploaded files. - `REVISION` - String - Required. The long commit hash of the current HEAD used to build the uploaded files. Do not use the short commit hash as this will cause indexing issues in the Studio. - `NODE_JS_VERSION` - String - Required. The Node.js version for the [Extension runner](/frontend-development/extensions.md#extension-runner). You can specify only major Node.js versions for the `upload` command. For example, `18` and `20`, but not `18.2.5` or `20.3`. - `BUILD_SUCCESSFUL` - Boolean - Optional. Defaults to `false`. Set it to `true` if the build was successful. Otherwise, set it to `false`. Only successful builds are stored in the Studio. - `BUILD_TIME` - String - Required. The date and time at which the build was created in the [RFC3339](https://datatracker.ietf.org/doc/html/rfc3339) format. You can specify the date and time in the `YYYY-MM-DDTHH:MM:SSZ` format. For example, `2023-11-21T08:14:31.830Z`. - `BUILD_DURATION` - Integer - Required. A numeric value in seconds that indicates the amount of time it took the build process to be completed. For example, `120` for a build that took two minutes to complete. - `BUILD_LOG` - String - Optional. Defaults to an empty string. The CI execution logs. - `BUNDLE_PATH` - String - Required. The path to the `bundle.min.js` file. - `BUNDLE_MAP_PATH` - String - Required. The path to the `bundle.min.js.map` file. - `SHOULD_DEPLOY` - Boolean - Optional. Defaults to `false`. Set it to `true` to deploy the build to the staging environment, or set it to `false` if you only want to upload the build. - `STUDIO_URL` - String - Required. Your Studio URL, in the format `CUSTOMER_ID.studio.frontend.commercetools.com`. You can deploy your commercetools Frontend project to the staging environment: - When uploading the build, by setting `SHOULD_DEPLOY` to `true`. - Manually [from the Studio](/frontend-studio/using-deployment-in-the-studio.md), by setting `SHOULD_DEPLOY` to `false`. If you face issues when [installing the CLI](/frontend-development/cli.md#install-the-cli) on your CI, you can [use the CLI without installation](/frontend-development/cli.md#cannot-install-the-cli-when-using-docker). ### Deploy frontend To deploy your frontend, you must connect your Git repository to Netlify. To do so, follow these steps: 1. [Add your Git repository to your Netlify dashboard](https://docs.netlify.com/welcome/add-new-site/#import-from-an-existing-repository). 2. Set the following values for the [build settings](https://docs.netlify.com/configure-builds/overview/#build-settings). - **Runtime:**`Next.js` - **Base directory:** `packages/PROJECT_ID/frontend` - **Build command:** `yarn build` - **Publish directory:** `packages/PROJECT_ID/frontend/.next` 3. Set the following values for the [environment variables](https://docs.netlify.com/environment-variables/get-started/#create-variables-with-the-netlify-ui-cli-or-api) in your Netlify site settings: - `NETLIFY_USE_YARN`: `true` - `NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME`: `CLOUDINARY_CLOUD_NAME` - `NEXT_PUBLIC_FRONTASTIC_HOST`: `https://PROJECT_ID-CUSTOMER_NAME.frontastic.io/frontastic` 4. [Set up website branch deployment](https://docs.netlify.com/site-deploys/overview/) and deactivate auto publishing by [locking deploys](https://docs.netlify.com/site-deploys/manage-deploys/#locked-deploys). Do not keep auto publishing active as this will cause deployment issues in the Studio. ## Related pages - [Area overview page with navigation](/frontend-development.md) - [Previous page: Node.js 18 backend compatibility](/frontend-development/node-18-backend-compatibility.md) - [Next page: Configure a firewall policy](/frontend-development/configure-a-firewall-policy.md) - [Search documentation and API specs](/search.md)