When is this applicable?
This is an onboarding scenario for a **first-time/onboarding deployment of a new site based on the Optimizely sample templates**, to use from start for development in a cloud environment. A new site like this does not require database restore, and the database schema is created during initial deployment.
## Before you start
This example uses deployment API to publish code.
See [DXP requirements](🔗) for recommended versions of software, tools and services to use when deploying.
See [Get started with DXP](🔗) for deployment information.
See [Install Optimizely](🔗) for how to add the Optimizely NuGet feed to Visual Studio.
Before deploying, add a wildcard binding to the site in the Manage Websites screen. This will help prevent failures due to URL-dependent code when migrating the database between environments. The following image shows an example of wildcard binding.
Go to **Admin > Config > Manage Websites**.
Click **Add** and add a wildcard (\*) Host Name.
## Deployment steps
The following steps create a new website, add Azure and Search & Navigation (formerly called Find), and deploy the code and database with content to the _Integration_ environment in DXP. The deployment uses the publishing profiles provided by Optimizely with your DXP setup.
Note
Optimizely has a bootstrap feature for deploying content. If there is an export package located in _[SolutionDir]\\App\_Data\\DefaultSiteContent.episerverdata_, the bootstrap feature imports that package during initialization and creates a site with content. The bootstrap is applied only if the site in the web app does not have any existing content.
### 1. Create a website with Azure
In Visual Studio, click **Create a new project.**
Search for Episerver, select **Episerver Web site**, and click **Next**.
In the Configuration dialog box: a. Enter **Project name**. b. Enter **Location**. c. Enter **Solution name**. d. Select your **Framework** (this example uses **.Net Framework 4.7.2**). e. Click **Create**.
In the Template dialog box: a. Select **Alloy (MVC or Web Forms).** b. Clear the **Configure Search** option. Optimizely Search and Navigation is added in a later step. c. Click **OK**.
Select **Tools > NuGet Package Manager > Manage NuGet Packages for Solution** to update the website to the latest Optimizely NuGet packages.
In the NuGet Package manager: a. Select **Updates**. b. Select **Optimizely Packages** in the **Package source** field to locate the latest updates. c. Enable **Select all packages**. d. Click **Update** and confirm the updates.
Add Azure to the website. In the NuGet package manager: a. Select **Browse**. b. Enter **Optimizely Azure** in the search field. c. Select the **EPiServer.Azure** package. d. Select your project. e. Click **Install** and confirm the installation.
Select **Tools > NuGet Package Manager > Package Manager Console**.
Enter **update-epidatabase** at the Package Manager prompt (PM> ).
Run the solution.
Follow the instructions to update the database and add admin account (if needed) and click **Register**. The Alloy site appears.
### 2. Update the configuration
You need to change some configurations for the website to work with Azure. The **container** attribute for the BLOB provider and **topic** for the event provider should be unique per site, within the same storage or service bus account. Therefore you need to update the mapping for BLOBs and event providers.
Important
Do **not** skip this step! If you do, assets are stored locally, and will not deploy properly to the Azure BLOB storage.
In Visual Studio, open _web.config_ and add the following configuration under the **episerver.framework** section. **Do not change** the values for **connectionStringName**, because these are overwritten with the correct environment-specific values during deployment. Optionally, you can change the **container** and **topic** names **mysitemedia** and **MySiteEvents** to names of your choice. The storage container name must be in lowercase, for example _mysitemedia_, for DNS compatibility.
Compile the solution (**Build > Build Solution**) and run it.
Note
Your local site displays an error message because the site is pointing to Azure after the configuration changes. This is corrected when you publish the project to Azure.
Note
When you deploy a website, you may want settings in the _deployed application's_ _web.config_ to be different from your _local_ development _web.config_. Instead of changing these settings for your local installation (as done here), you can [apply a transformation of the web.config file](🔗) when you deploy to Azure to avoid breaking your local site.
### 3. Publish website with content
In Solution Explorer, right-click the project in Visual Studio and select **Publish**.
In the **Pick a publish target** dialog box, select **App Service** and **Select Existing**, then select **Create Profile > Publish immediately**; the **App Service** dialog box appears.
Click **Create**.
Under **Publish**, click **Edit**.
**Connection** should display the imported publish profile settings, no changes are required here. Click **Next**.
In the **Settings** section, enter the remote connection string to SQL Database by selecting it under **EPiServerDB** (copy/paste it from the publish profile if it does not appear in the list).
Enable **Update database**, and click **Configure database updates**.
Note
If this is not the first time you are publishing to the Azure Web App (for example, you are republishing), disable this option because there are already database objects created.
Clear the **\[Auto schema update\]** option, click **Add SQL Script**, and browse to the _EPiServer.CMS.Core NuGet_ packages (located in _\[SolutionDir\]\\packages\\EPServer.CMS.Core.N.N.N\\tools\\),_ and select _EPiServer.Cms.Core.sql_.
Click **Save** in the **Settings** section.
Click **Publish** to publish the website with content. The website opens in a browser when finalized. If not, you can access it with the default URL for the environment, publishing profiles provided by Optimizely with your DXP setup.
### 4. Verify the website
Go to the default access URLs for the environment, for example _<http://\[projectNNNNinte\].dxcloud.episerver.net>_.
Log in to the website with the administrator user (see below).
Verify that the website is working.
During creation of an Alloy sample site, you are prompted to add an admin account. However, these credentials are stored in your local database, and are not deployed to the Web App. Therefore, you may need to create a new admin user, to log in after deployment.
If you do not have an admin account, you can create and upload an .aspx file to your Web App, and let it create an account. See these example files for [ASP.NET Membership](🔗) and [ASP.NET Identity](🔗). Select the appropriate one depending on your provider (ASP.NET Identity for an Alloy sample site). Follow the instructions in the file. Use [Kudu](🔗) to upload the file to the website root folder, and open the file once in a browser. Log in by adding _/episerver_ to the site URL, using the credentials in the uploaded file.
Note
When you have succesfully logged in, **remove the .aspx file** from the site in the Web App.
### 5. Add Search and Navigation (formerly Find)
An index is automatically set up and configured as part of DXP. In this step, you add Optimizely Search and Navigation as default search for your solution, and publish the changes to Integration.
In the NuGet package manager for your project, locate the _EPiServer.Find.Cms_ package and click **Install**.
In _web.config_, modify `
<episerver.framework>` to `<episerver.framework createDatabaseSchema="true">`.In Solution Explorer, right-click the project in Visual Studio and select **Publish**. (In the **Edit > Publish > Settings** screen, ensure that **Update database** is _not_ selected (deselect if needed).)
Click **Publish**.
Verify that the website is working.