--- title: "Start Code Studio Project with Cloud IDE" date: "2022-06-08T19:16:31+00:00" summary: image: type: "article" url: "/acquia-cloud-platform/add-ons/code-studio/help/91016-start-code-studio-project-cloud-ide" id: "23ce665a-0167-44c1-b91c-c78610040e30" --- Table of contents will be added Goal ---- Use a Cloud IDE to create a new Drupal project and then integrate it with Code Studio. Overview -------- Code Studio provides a powerful toolchain for making your Drupal development team more efficient than ever. Paired with a Cloud IDE, you’ll be able to work with a Drupal-optimized toolset that’s entirely cloud-based, freeing up your team to focus on actual development. Acquia’s Code Studio documentation talks about getting started, but there are a few different ways you can set things up. The purpose of this tutorial is to give you a step-by-step guide to setting up a new Drupal application, using only a Cloud IDE and Code Studio. No local setup required! 1. Create a Cloud IDE ------------------ The first step is to go into your Acquia Cloud application, and create a Cloud IDE. ![Dashboard of Acquia Cloud Platform showing environments, navigation menu on the left, and an "Actions" dropdown menu on the right.](https://acquia.widen.net/content/6e062949-230b-4c65-8eba-35b76c2c79d9/web/url_b0208851c8327801c109111e7976060e.webp) 2. Launch the IDE -------------- The process will take a couple of minutes, but then you will see the IDE listed below your environments. Click to launch the IDE. ![Dashboard interface of Acquia Cloud Platform showing a "Launch Cloud IDE" button and environment details for an application.](https://acquia.widen.net/content/b2f72dfa-a2cf-4af0-beb0-1ceae6200642/web/url_cd473b1c9b310bb7d865e0a88a0ddb70.webp) 3. Configure the IDE ----------------- Now, you’ll see a prompt to configure the IDE. Click the "CONFIGURE IDE" button to start the process. ![Acquia Cloud IDE welcome screen with setup instructions for Drupal development. Includes steps to configure IDE and copy from Cloud Platform.](https://acquia.widen.net/content/46860673-5b61-4019-b7f8-40508dcdfa95/web/url_e272a73a00b947a0207c4acd853bbc8d.webp) 4. Create the Drupal Application ----------------------------- Once that’s complete, you can copy from the Cloud platform (if there’s already a working Drupal install there) but since we’re setting up a new application, click the link below the button to “create a new Drupal application in your Cloud IDE”. In the prompt that appears in the command terminal at the bottom, we recommend typing 0 to use acquia/drupal-recommended-project. ![IDE interface displaying instructions for setting up a Drupal application, with options to create a new project or copy from the cloud.](https://acquia.widen.net/content/fa71fd9b-17ae-4065-b7ab-f414e002da0f/web/url_4a5293643acacb71e3d5acc40a4207e7.webp) 5. Install Drupal -------------- That process will take a few minutes, as it pulls down all the files necessary to use the Acquia CMS. Once it has completed, the next step is to go ahead and install Drupal. In the menu at the top of the IDE, you can select Manage Drupal Application > Open Drupal Application to install using Drupal’s installation wizard, but we want to use the Acquia CMS install wizard. In the IDE's command line type `./vendor/bin/acms acms:install` to start the process. You can press the return key to use the defaults. It’s another example of how our Cloud IDE is designed to work seamlessly with Drupal, out of the box! The install will take a few minutes, but once it’s done, your Drupal site will be functional. ![Terminal window displaying Drupal installation progress, with "Acquia CMS" in ASCII art, and installation tasks listed below.](https://acquia.widen.net/content/fc7566bf-3a77-431c-bd42-e4e9e1415878/web/url_1f1b65801eef9d99b495d6c2e7336c21.webp) 6. Track Configuration Changes in git ---------------------------------- To take full advantage of Drupal’s configuration management, however, there’s another change we should make. By default Drupal doesn’t assume it can write files anywhere outside the site’s files folder, but by design any files in this directory will be excluded from the git repo. You can still copy them between environments using drush commands, the Acquia CLI, or the Acquia Cloud UI, but doing so means you lose the ability to track changes, maintain version control on the configuration, and easily roll back changes when needed. Let’s get Drupal to export the configuration files in a location where they will be tracked by git. We could just update the application’s .gitignore file to force the directory to be tracked, or force the directory to be tracked by git on the command line, but it would be better to have these files outside the web root anyway, so let’s give Drupal that direction, in the site’s settings.php file. On the left hand side, open the Project pane to show your files, and navigate to docroot/sites/default and click on settings.php to open it in the IDE’s editor. ![Code editor displaying PHP configuration for a Drupal application, including database settings like host, port, username, and password. Visible file tree on the left.](https://acquia.widen.net/content/85195599-6124-487b-af83-6140337b8c07/web/url_ccbd0b7066f67c9b4a01f0c0d4b408bd.webp) Change the last line of the file, where it sets the value for $settings\['config\_sync\_directory'\] to use a value of '../config/sync'. If the file won’t save, in the terminal go to docroot/sites/default and run `chmod 0644 settings.php` and then save the file. After the change has been saved, revert the permissions with `chmod 0444 settings.php`. In the terminal you can now use `drush cex` to export the configuration to code whenever you’re ready to sync configuration changes to another environment. It’s a good idea to do that now, so our code repo will have a snapshot of the initial configuration. 7. Connect to Code Studio ---------------------- Now we’re ready to connect to Code Studio. In the IDE’s terminal, run `glab auth login --hostname=code.acquia.com`. You’ll be prompted for a Personal Access Token. You can command-click on the provided URL to open it in a new browser tab. Give the access token a name, and make sure you give it the api and write\_repository permission scopes. ![Configuring the Personal Access Token in Code Studio](https://acquia.widen.net/content/e503cc8b-dda2-4ecb-b0e6-d5896bd93e39/web/url_b91a6f40f45a568dcf9e09c239715198.webp) The page will refresh, with the access token value at the top. Click on the button to the right of the token to copy it to the clipboard. Finally, switch back to your IDE, paste the token into the terminal and hit return to complete the authentication. 8. Create the Code Studio Project ------------------------------ Now we’re ready to create the Code Studio project where we will manage our site’s code, and associated issues and merge requests. In the terminal, run `acli codestudio:wizard`. You’ll be prompted to enter an API Key, and once again you can command-click on the provided URL to create one. ![Terminal window showing instructions to configure Acquia Code Studio using an API key, with a prompt to enter the key.](https://acquia.widen.net/content/48956c32-1ff8-471a-8958-95befb22d891/web/url_f95e141a547d335378a699cc000f5526.webp) 9. Create an Access Token ---------------------- Click on the Create Token button in the top right to create a new token. You’ll need to provide a label, and then Code Studio will provide an API Key and API Secret. Copy each and paste it into the IDE terminal when prompted. Once the wizard is complete, you’ll see a success message in the terminal: ![Code editor screenshot showing successful configuration of a Drupal project using Acquia's AutoDevOps, with instructions for Git integration and a project URL.](https://acquia.widen.net/content/020d913a-4f4e-4539-961f-9b240ce073fa/web/url_53f0461723eda2d94b7f309fba4cebf9.webp) 10. Add the git Remote ------------------ Let’s finish the setup of the site by adding the git remote, as instructed at the end of the message. Note that if you will only use Code Studio to manage the repo, you can simplify working with the repo by setting the name of the remote to origin, which will allow it to be used by default. In the example here, that would change it to `git remote add origin https://code.acquia.com/presales-demo/inspacenextmac.git`. 11. Commit and Push Your Site Code ------------------------------ Now we’re ready to push our site code into Code Studio. From the project root at ~/project, in the terminal run `git add .` to add all the site’s code, then `git commit -m "Installed site"` to commit it. Finally, run `git push codestudio` (or simply `git push` if you added the remote as “origin”), and Code Studio is ready to manage the site. 12. Push Your Database and Files ---------------------------- As a last step in the IDE, run `acli push:db` and `acli push:files` to ensure your dev environment has the database and files for the installed site. The Code Studio Project ----------------------- Optionally, you can now customize the Code Studio project that has been created for your application. If you still have the Code Studio tab open from when you created tokens, you can switch to that and click on the Code Studio logo in the top left to see a list of your projects, then click on the name of the project you just created. Alternatively, in the terminal you can scroll back up to the success message from when the project was created, and command-click on the project URL to view your project. Once you’re in the project, you can customize various aspects: give it a more human-friendly name, upload an image to use as an avatar, assign team members, and so on. You can start using the project’s WIki to document information that will help to onboard new team members, set up issue boards, and more. In particular, a setting to check is In the CI/CD settings, set the preferred deployment strategy, for example to deploy to staging and manually release to production. ![GitLab Auto DevOps settings page showing deployment strategy options and Kubernetes integration notice. Options include continuous and automatic deployment strategies.](https://acquia.widen.net/content/592dc6ed-fce6-4417-8a1c-2101f216f1a1/web/url_c3752edbc06543bd9e8d8c767d7e1a4d.webp) Your project is now ready for your team to start their work. Happy coding! Additional Resources -------------------- * [Learn more about Acquia Code Studio](https://www.acquia.com/products/drupal-cloud/code-studio) * [Acquia Code Studio Product Guide](/node/55936) * [Getting started with Code Studio](/node/55936)