# Development environment

This page will walk you through the development workflow when using an in-platform VS Code workspace to build OSDK React applications.

## Get started

To enable development in your code environment, you will need to [set up your Developer Console](../../developer-console/create-application/index.md). During the setup process, you must select **Create client-facing application** to enable creation of code repositories from Developer Console.

![Create a client-facing application from Developer Console](../../../assets/af55788fbfd8d99364098e97ec62bec9762e6a8f9135fa7b518fbf2e3440364f.webp)

To use a VS Code workspace, open Developer Console and select **Create code repository** under the **Code Repository** section in the left side panel. This action will bootstrap your repository with the default React template. You can then select **Open in VS Code** to launch an in-platform workspace.

![Create a code repository in a VS Code Workspace from Developer Console](../../../assets/7216cd1372cf71f0eb2f4c67e240e955eef803abb480099c48408f652c423c1f.webp)

The repository template will include a basic React application integrated with authorization and the Ontology SDK.

## Development lifecycle

Once the VS Code Workspace is launched, you should see the code editor on the left and a live preview of your application on the right. You can start editing your code as if working in a local environment.

![The VS Code Workspace landing page.](../../../assets/bd192ac0ee7d8c5f0b0d911da7093946ffc049707b0e50018bce2915d8b7e252.webp)

### Edit

You can now start building your React application. Be sure to edit and test your code after writing, then use git commands or the VS Code interface to commit and push your changes to make them visible to other developers in your project. In the terminal, run `npm run lint`, `npm run test`, and `npm run build` to ensure that checks will succeed.

You can also refer to the **Ontology** tab in the left side panel to view generated documentation and code snippets for your OSDK and return to Developer Console.

![The available options in the "Ontology" tab in a VS Code workspace.](../../../assets/33d00137e81ba1618b3bb8618a5437b76cec85fcbbe70d6daa253102cee31309.webp)

### Deploy

To deploy a React application, you must first cut a release. This is commonly done with the `git tag` command, where you can set the version number and then push it to your repository:

```bash
git tag <x.y.z>
git push origin <x.y.z>
```

Alternatively, you can cut a release from within the Code Repositories interface by selecting **Open in Code Repositories** from the top right corner of the screen. Navigate to the **Version control** tab, then open the **Tags and releases** section to view previous releases and cut a new release.

![The "Tags and releases" section of the "Version control" tab in Code Repositories.](../../../assets/cbf58ec10791d3914bed913b2b1d780bcb55082168f4a3d999001699c2917ca7.webp)

Once the release passes checks, you will be able to view your application in Developer Console.

![Code Repositories checks & Developer Console website hosting](../../../assets/94b97ff1983b39200a28ac8eaa7afda632cefcba65907cbddfd7c66940ab1205.webp)

## Content Security Policy

By default, we apply a restrictive Content Security Policy (CSP). This means a request to non-Foundry URIs will fail and must be explicitly allowed.

To detect a CSP error, use the `F12` key and review logs inside the console. If you have CSP failures, you will see errors similar to those shown below:

![An example CSP error in a console.](../../../assets/6c97393fa72ecd8584437a89b2f4898c2b07d3af70c83a53d65ee0785a4c92ee.webp)

You can apply a temporary CSP to your VS Code workspace. For security reasons, this CSP will not apply to other users of this workspace and will expire when the workspace is paused or restarted.

![The workflow to add a CSP to a VS Code workspace.](../../../assets/d893e97ac53e4fb5098d06747ccd6d8194d9fea07520c783ae6c77e66ecd8434.webp)

After testing your application inside the VS Code workspace, ensure that the CSP is updated for your Developer Console application.

![The CSP configuration screen for Developer Console.](../../../assets/b22851cd3f03179d847cea560317c5904cb845f92b3671ff16d9d19b4737618f.webp)

## Development tips

### To Do application tutorial

If you are new to Developer Console and OSDK, we recommend following one of our tutorials to get started. Navigate to the **Build with AIP** application in your enrollment and install one of our example workflows.

![Available To Do application tutorials in Build with AIP.](../../../assets/6b6e80386c145176cd44bd976db601d7fb4a73ac42358081dd3cac4c3de20899.webp)

### Progressive Web Application (PWA)

For an optimized editing experience, you can choose to install your workspace as a Progressive Web Application (PWA). A PWA will accept some commonly used shortcuts, such as `Cmd+W` (macOS) to close a tab.

![Pop-up messages to install and open a PWA application.](../../../assets/a095d5f4eedc3c335279548f28299ea58faa0e23510ed723905caaa5bcab9f35.webp)

![An example PWA application in VS Code Workspaces.](../../../assets/2c2fcc52efaa52435ea67c9c47908e0602f0175158432b83cddefc3121dbc0ab.webp)

### Zen mode

For a nearly native VS Code experience, we recommend using Zen mode. Select **View > Activate Zen mode** to enable. Zen mode will hide the platform interface and make VS Code take up the entire browser window. To exit Zen mode, hover over the three dots **...** in the top center of your screen.

![The option to use zen mode and a view of how it looks in the platform.](../../../assets/bdea3ad8a92feea6aa30a616cb4f5da4066d5a0db6b43836c93a2eb8798c92d7.webp)

### Local development

Instead of working inside the platform, you can work locally on your machine in the following ways:

* Navigate to your repository in the Code Repositories application, then select **Work locally** in the top right corner of your screen to clone your repository and export the `FOUNDRY_TOKEN` to your local environment. <br><br>
  ![The option to work locally from Code Repositories.](../../../assets/780b0d5c8ba376005755a489deb6b837b91193f9c14444285fc58f1f2f09dde3.webp) <br><br>

Refer to the `readme.md` file in the repository for more information.

You can store your repository outside the Palantir platform while still using the Developer Console to deploy the application. Learn more in our documentation on [deploying an Ontology SDK application on Foundry](../../developer-console/deploy-custom-application-on-foundry/index.md).

### PR preview \[Beta]

:::callout{theme="neutral" title="Beta"}
PR preview for React applications is in the [beta](../../platform-overview/development-life-cycle/index.md) phase of development and may not be available on your enrollment. Functionality may change during active development.
:::

To add efficiency and easier collaboration to your projects, you can access a PR preview of changes to your React application before pushing updates. A PR (pull request) preview provides a working version of your React application based on the code committed in your pull request. You can preview any proposed changes to your application before it is merged into your main branch and production state, making it easier for you to check for any undesirable outcomes and verify user-facing workflows before changes make their way to production. Previously, builders, designers, and other members of an application team would need to create a development environment to view changes. The PR preview feature removes this requirement, allowing for quicker verification of production changes in design and functionality and a more efficient, collaborative process.

The PR preview feature is available for any OSDK React application that is hosted in a Foundry code repository using the Developer Console [web hosting capability](../../developer-console/deploy-custom-application-on-foundry/index.md).

Follow the steps below to get started with PR previews:

1. First, generate an application in Developer Console.

2. Then, configure website hosting for that application. <br><br>
   ![The website hosting configuration page in Developer Console.](../../../assets/d7593cc5c1d72ae0cb27d6fda18806e40f917b18bd08e435631c5fbf60a15f3e.webp) <br><br>

3. Choose to use a [VS Code workspace](../../vs-code/overview/index.md) to take advantage of the developer features available in the [Palantir extension for Visual Studio Code](../../palantir-extension-for-visual-studio-code/overview/index.md). You can also open your application code in [Code Repositories](../../code-repositories/overview/index.md). From either environment, you can create branches in your repository, implement code changes with commits, and push updates. You can use the following terminal commands or your environment interface to make changes:
   1. Create a new branch: `git checkout -b myFeatureBranch main`
   2. Implement your code changes and commit your work: `git commit -am "implement UI change to show PR Preview"`
   3. Push your changes to the code repository: `git push --set-upstream origin myFeatureBranch`

4. Once you make your desired changes and all checks are complete, return to Code Repositories if you were working in a VS Code workspace.

5. Navigate to the **Version control** tab at the top of the screen and choose **Pull Requests**.

6. Choose the pull request you would like to preview, then select **Preview** in the lower right corner to open a preview version of your React application. <br><br>
   ![A pull request in Code Repositories with the option to view a preview of the changes.](../../../assets/493decb1b86074a95ab7ab03fd908970baf43087968cc18ca85743c3a2241bb9.webp) <br><br>

You can also find a PR preview link for every commit on your branch by navigating to the **Commits** tab of the pull request. PR previews are only available within seven days of the creation of the pull request. After seven days, the preview will expire.

#### Preview permissions

To access the PR preview feature for React applications, users must have proper permissions for the application from Developer Console. To manage these permissions, open your application in Developer Console, then navigate to **Sharing** in the left sidebar.

To make changes, create pull requests for the application code, and share PR preview with other users, you must have either `Owner` or `Editor` permissions. To share a PR preview with a user without granting permissions to edit your application code or configurations, add them as a `Viewer` under **Share hosted website**.

![The permissions configuration page in Developer Console with the option to grant users access to view PR previews.](../../../assets/dd74ab663f01bebc38c5171b369eb6e3e5e518eaad6b718739b69a806f8f2936.webp)