In this tutorial, you will learn how to install the Episerver powered sample site, called Foundation Spa React. The sample site - available to download here - was released in mid 2020 and it is Episervers first foray into React. In this sample site, Episerver is installed as a headless CMS. Using the content delivery API, a JavaScript built web-head communicates to the CMS using a REST API. The sample site is in essence two things, a headless CMS and a web-head. Episerver using C#, the sample site using JavaScript. This configuration is different from a traditional Episerver site. Historically sample sites have been solely C# based. A developer would use the Visual Studio extension to install a sample site. After a successful installation, these sample sites would be installed within a single C# project and all the files would live within a single folder. Things have now changed. As the architecture is more complex the installation is no longer done within a Visual Studio extension, instead, this site uses a more manual process.

Trying to get this sample site working can definitely be more complicated than earlier sample sites. While the steps to install the foundation SPA are fairly simple, I have encountered a few issues whenever I have tried to clone and install it. In this guide, I will provide a step by step walk-through of my experiences getting this sample site up and running. The aim of this guide is to help you avoid the issues I encountered. Sounds good? Let us begin!

Installation

The first step is to clone the code from Github:

https://github.com/episerver/Foundation-spa-react

After cloning the code, check that you have the correct dependencies installed. To do this, open a terminal within admin mode and run this command:

In order for the sample site to successfully install, you will need to have a version of node.js installed locally that is greater than v12.16.3. If your local version of node.js is below this, the installer will fail. Upgrading node is easy and can be done with this command:

The next prerequisite is to ensure that the database will install without issues. All good developers will want to install the database within MS-SQL. To do this you will need to make sure SQL server is installed and you have a valid account that can use server authentication to access a database. If you are simply installing the site on your local PC, use the 'sa' account.

After cloning the code, you should be able to see a file called setup.bat. Within a terminal run setup.bat. This will kick off the installer. When the installer kicks-off you will be asked to add a few configuration options, the important ones are the SQLSERVER. Ensure this value matches the server details that you use to log into SQL manually with SQL authenication. The ADDITIONAL_SQLCMD option should be set like this:

One issue I encountered that prevented the SQL database from installing, was this error:

Error: Microsoft ODBC Driver 13 for SQL Server

I overcame this issue by uninstalling and re-installing, ODBC Driver 13. If you encounter the same issue then you can download the driver here, ODBC Driver 13.1 for SQL Server)

Installing the driver fixed the installation error from occurring on my home laptop, win! Later when installing the sample site on my work laptop I encountered a separate SQL issue. For whatever reason, the SQL scripts failed to run correctly resulting in the database not installing correctly. To check if the database installed you can use Studio Manager (SSMS) to login into the SQL server and manually check the foundation database exists and it has tables installed. To fix this issue on my work laptop, I made a few manual tweaks to the SQL installation script. This was the only way I could get the script to run on this laptop. On line number 155, I changed the code like this:

To:

Where 'LDNPLMDEV1147' is the name of my SQL server. On line 65 you will also notice this script:

As you can see the password is hardcoded. I updated the script like this:

For good measure I also updated line 52, like this:

After making these tweaks I re-ran the install. The database finally installed as expected. After the installer finishes the site should load. If the site throws an exception, open up Visual Studio and compile the website. re-load the site and the sample site should load successfully. Happy Coding!