Note:

To make the most of this tutorial, acquire our publicly available credentials to [log in to a shared developer environment](🔗). (This is different from your personal developer trial account credentials that leads you to a private trial environment.)

## Milestone Overview

### Goal

Set up a development project to develop your channel using your local frontend app in the _Experience manager_.

### Estimated Time to Complete

2-5 minutes

### Summary

In this milestone, you will prepare the frontend app you created in the [previous milestone](🔗) for use in a preview context in the Experience manager, then create a **development project** in Bloomreach Content and configure it to use your local frontend app for the channel preview.

**Note:**

A [**project**](🔗) is a set of related channel configuration and content changes that is developed in isolation from the live site. The changes contained within a project, once reviewed and ready, can be "merged" into the "core" (i.e. the live site).

**Note:**

A [**development project**](🔗) is a special project in which developers can make **site configuration** changes and use a local development version of their frontend app in the Experience manager preview.

**Note:**

A [**site configuration**](🔗) is a collection of configuration items required to deliver a site, such as page layouts and components.

## Prepare the Frontend App

Before you can use your frontend app to render the channel preview in the _Experience manager_ application, you need to make one small change.

In `src/App.js`, add the `path` property to the `BrPage` element as in the following code snippet:



This ensures that any request parameters in the site URL are passed on to the [Delivery API](🔗)'s [Pages endpoint](🔗). This is required for the preview in the _Experience manager_ application to work correctly.

## Create a Development Project

You are now ready to create your development project. Watch a short demonstration before you start:



In Bloomreach Content, open the _Projects_ application:

1279


Click on the _+ Project_ button in the top right to create a new project.

Give your project a name (for example, "Getting Started") and make sure to check the checkboxes for both _Development project_ and _Includes content type changes_:

**Note:**

A [**content type**](🔗) defines the data structure and the editing template for a class of documents used to manage content in a channel.

1278


Click on _Create_ to create the project.

Once the development project is created, click on the _+ Channel_ button, select the "getting started" channel you created in [Milestone 1](🔗), and click _Add_:

1279


**Note:**

You will see the channel listed in the project with a unique identifier between parentheses ("**getting-started-vsQ3J**" in the screenshot below). When you added the channel to the project, a branch of the channel's configuration was created, similar to how code can be branched in a version control system like Git. The unique identifier refers to that branch and you will use it in the [next milestone](🔗) to perform operations on the site configuration using the [Site Management API](🔗).

1279


The next step is to configure your project to use your local frontend app to render the preview in the _Experience manager_ app.

Click on the cogwheel icon (at the far right) for your channel. In the dialog that pops up, you can see the _Channel front end URL_ is set to the standard placeholder frontend app provided by Bloomreach.

You can either set the frontend URL for the project for all users, or just for yourself.

For now, under _For me_, use, select the 3rd radio button, enter `http://localhost:3000/` in the text box, and click _Set_:

1279


Now click on the channel to open it in the _Experience manager_ app.

You should see the channel preview as rendered by your own frontend app. Also note that your development project is selected in _For project_ at the top:

1278


**Tip:**

To see the difference with the "live site", use the _For project_ selector to switch to "core", then back to your project.

Your development project is now set up and you are ready to start development!

## Full Code

Find the complete code for milestone 3 in React, Angular, and Vue in Github:

[https://github.com/bloomreach/content-getting-started/tree/Milestone_3_Set_up_a_Development_Project](🔗)

## Next

In the next milestone, you will start actual site development and configure a basic "Hello World" component and develop the accompanying frontend code for the component.