---
title: "Pushing your application code into your Code Studio project"
date: "2024-12-27T11:15:33+00:00"
summary: "Learn how to push your application code to Code Studio with step-by-step instructions for Drupal and Node.js projects."
image:
type: "page"
url: "/acquia-cloud-platform/add-ons/code-studio/pushing-your-application-code-your-code-studio-project"
id: "a8a15223-a9b2-4430-813f-4664b0526f45"
---

Pushing your application code into your Code Studio project
-----------------------------------------------------------

**Prerequisites:**

*   [Configure a Code Studio project](/acquia-cloud-platform/add-ons/code-studio/configuring-project "Configuring a project").
*   Get a personal development workspace such as [Cloud IDE](/acquia-cloud-platform/add-ons/ide) Lando or DDev.

To push Drupal application code into your Code Studio project, use one of the following options:

*   [Option 1: Pushing code through an existing application repository](/acquia-cloud-platform/add-ons/code-studio/getting-started/setting-project/pushing-your-application-code-your-code-studio-project#section-option-1-pushing-code-through-an-existing-application-repository)
*   [Option 2: Pushing code through a new Drupal or Node.js application repository](/acquia-cloud-platform/add-ons/code-studio/getting-started/setting-project/pushing-your-application-code-your-code-studio-project#section-option-2-pushing-code-through-a-new-drupal-or-nodejs-application-repository)

### Option 1: Pushing code through an existing application repository

**Prerequisites:**

*   For Drupal projects:
    *   Composer to manage your application dependencies
    *   PHP version 8.1, 8.2, 8.3 or 8.4
*   For Node.js projects:
    *   Node.js version 22 or later
    *   Node Package Manager (NPM) to manage your application dependencies
*   Clone your application code on your local machine or on [Cloud IDE](/acquia-cloud-platform/add-ons/ide).

To push an existing Drupal application repository into Code Studio:

1.  Navigate to the Drupal project directory on your local machine or on Cloud IDE:
    
        cd <git-repository-path>                                                   
    
2.  Add a new remote based on your requirement:
    *   To use multiple remotes to manage the repository, add your repository to remote with the name **codestudio**:
        
            git remote add codestudio https://code.acquia.com/[gitlab-group]/[gitlab-project-name].git                                                                        
        
    *   To use only Code Studio to manage the repository, add your repository to remote with the name **origin**:
        
            git remote add origin https://code.acquia.com/[gitlab-group]/[gitlab-project-name].git                                                                       
        
3.  Push the code from the project root to Code Studio:
    
        git add .
        git commit -m "Installed site"
        git push <REMOTE> <BRANCHNAME>                                                                
    
4.  Ensure that your development environment has the database and files for the installed site:
    
        acli push:db
        acli push:files
        
    
    Code Studio is ready to manage your site.
    

### Option 2: Pushing code through a new Drupal or Node.js application repository

### Drupal application

To generate a new Drupal application repository:

1.  Run the `acli new` command and select `acquia/drupal-recommended-project`.
2.  Navigate to your new directory by running the `cd <directory name>` command.
3.  Continue with the steps mentioned in [Pushing code through an existing application repository](/acquia-cloud-platform/add-ons/code-studio/getting-started/setting-project/pushing-your-application-code-your-code-studio-project#section-option-1-pushing-code-through-an-existing-application-repository).

### Node.js Front End Hosting - Basic

To generate a new Node.js application repository:

1.  Run any of the following commands:
    *   `npx create-next-app@latest`
    *   `yarn create next-app`
2.  Navigate to your new directory by running the `cd <directory name>` command.
3.  Enable static export and add the output mode in the next.config.js file (the default build output directory will be out/).
    
        module.exports = {
          output: 'export',
          reactStrictMode: true,
          exportPathMap: async function (
            defaultPathMap,
            { dev, dir, outDir, distDir, buildId }
          ) {
            return {
              '/': { page: '/' },
              '/static': { page: '/static' },
            };
          },
        };
    
4.  Ensure that the repository is always up-to-date because it uses the --force option to upload the artifacts on Cloud Platform.
5.  Continue with the steps mentioned in [Pushing code through an existing application repository](/acquia-cloud-platform/add-ons/code-studio/pushing-your-application-code-your-code-studio-project "Pushing your application code into your Code Studio project").

Custom build directory or root directory
----------------------------------------

To add a custom build directory, update the `next.config.js` file to add the `distDir` configuration for a custom build directory.

    module.exports = {
      distDir: 'customBuildDir',
      reactStrictMode: true,
      exportPathMap: async function (
        defaultPathMap,
        { dev, dir, outDir, distDir, buildId }
      ) {
        return {
          '/': { page: '/' },
          '/static': { page: '/static' },
        };
      },
    };

Update the `acquia_config.yaml` or `acquia_config.yml` file:

    output_directory: "customBuildDir"
    root_directory: "./"

To implement pre-built artifacts, include the `enable-prebuilt-artifact` flag. For more detail, see  [Continuous Integration and Continuous Deployment](/acquia-cloud-platform/add-ons/node-js/configuring-external-cicd "Configuring external CI/CD").

### Node.js Front End Hosting - Advanced

To generate a new Node.js application repository:

1.  Run any of the following commands:
    1.  `npx create-next-app@latest`
    2.  `yarn create next-app`
2.  Navigate to your new directory by running the `cd <directory name>` command.
3.  Complete the following step based on the usecase:
    1.  **No build artifacts (such as Express.js web servers):** Remove or exclude the `output_directory` field in `acquia_config.yaml` or `acquia_config.yml` to skip the `npm build` command.
    2.  **Build artifacts present:** Add the framework's default build directory to `output_directory`. For example, Next.js uses `.next/` by default (unless you override it):

    output_directory: ".next/"
    root_directory: "./"

4.  Ensure that the repository is always up-to-date because it uses the --force option to upload the artifacts on Cloud Platform.
5.  Continue with the steps mentioned in [Pushing code through an existing application repository](/acquia-cloud-platform/add-ons/code-studio/pushing-your-application-code-your-code-studio-project "Pushing your application code into your Code Studio project").

Custom build directory or root directory
----------------------------------------

  
To add a custom build directory, update the `next.config.js` file to add the distDir configuration for a custom build directory.

    module.exports = {
     distDir: 'customBuildDir',
    };

Update the `acquia_config.yaml` or `acquia_config.yml` file:

    output_directory: "customBuildDir"
    root_directory: "./"

Supported frontend frameworks for frontend hosting advanced and their default build directories.
------------------------------------------------------------------------------------------------

**Supported Framework**

**Default Directory**

NextJS

.next/

NuxtJS

.output/

AngularJS

dist/

ReactJS

build/

VueJS

dist/