The best way to escape from your problem is to solve it

Robert Anthony

A few months back my brother asked me to build an application after a long lasting driving course. A website for booking driving lessons online with a management portal for driving schools. We chose a name, Drivelli and started to work on it as a side project. It was clear from the beginning that we are going to develop it together with my good friend in technologies we know and like – ASP.NET Core and React. To provide great user experience and enhance SEO we planned to include server-side rendering.

At the time of .NET Core 2.2 supremacy, Spa Services seemed as a right way to include server-side rendering in the ASP.NET Core projects. Just imagine my surprise when I tried to migrate Drivelli to .NET Core 3.1.1 and noticed that Spa Services is obsolete and will probably be removed, slashed, terminated in future versions of .NET.

The principles

There has been a lot of buzz about a possibility to create client-side Web apps with C# recently. Honestly I’m not a big fan of mixing .NET or C# into frontend world dominated by JavaScript (sorry Blazor).

ASP.NET Core on the backend and React on the frontend

On the other hand I like C# for its clear syntax and a type system that makes sense. I appreciate ASP.NET Core for its performance, routing system, mature libraries, great Azure cloud integration and awesome tools for debugging and monitoring. It’s my first technology of choice for backend development.

Web development does not live by backend only. According to builtwith over 1 million websites use React for frontend and the trend clearly shows its growing popularity. React has developed its strong position in building user interfaces not by accident. It makes it so much better thanks to the re-use of components and rich ecosystem of ready to include UI building-blocks. Did I already mention that it’s easy to start with?

Frontend decoupled from the backend

Have you ever stepped into the bank or pharmacy and got literally scared by the MS-DOS-like interface in programs people still use in 2020? These systems stay for so long because they do the job and it’d be very expensive to replace them with new ones. Imagine a world where it would be easy to replace their user inferfaces only.

Decoupling frontend from the backend makes changing the look and feel of your Web applications easy and fast. It’ll also save you a lot of copy – paste to razor pages and debugging problems that occurr during the integration process.

Server-side rendering as the icing on the cake

“Search engines cannot see SPA websites properly” or “the blank page flicker happens upon opening the page” are quite common allegations about Web apps where frontend is written in React. Server-side rendering literally removes these problems.

Server-side rendering lets you (and search engines too) start viewing the page immediately while React builds the virtual dom and attaches events to make the page interactive.

Spin up your next project with ASP.NET Core, React and Server-Side Rendering (SSR)

This solution is a combination of CRA (Create React App), Storybook for React, default example project template for creating ASP.NET Core MVC applications. I got inspired by Spa Services to create my custom asp-prerender-module and asp-prerender-data attributes. Big thank you to the contributors for creating these great entry points for starting up new projects.

Let’s quickly analyze what happens with a request after a user enters a website address in the browser and hits enter. You’ll notice that the request based on the address hits the controller thanks to the ASP.NET Core routing system. In the controller properties of view models are filled with data and passed to the very simple view.

Now the interesting part. The view contains a div with asp-prerender-module and asp-prerender-data attributes filled with a module name and a view model.

Prerequisites

To run the cloned assets you’ll need to install a number of tools:

• .NET Core – download and install the latest LTS version
• Node.js – download and install the latest LTS version
• Docker – download and install the latest stable version

These IDEs will make your life easier when you’ll create new pages and components:

• Visual Studio 2019 Community – IDE for backend development
• Visual Studio Code – IDE for frontend development

Quickstart

Clone this boilerplate repository from GitHub to spin up your next application with ASP.NET Core, React and Server-Side Rendering.

Once the sources are present on your machine build frontend assets by executing following commands from the /fe folder:

npm install

npm run build-fe 

Run the application using Docker from /misc/docker and see it live using http://localhost:51117 in your browser:

 docker-compose -f docker-compose-dev.yml up --build -d

Bonus: Storybook to impress your clients quickly

Storybook is an open source tool for building in isolation stunning user interfaces. The great news is it works well with React. You can use Storybook to create and show your components to clients before they get integrated with backend services. Along with the application thanks to the executed docker-compose command the Storybook can be accessed at http://localhost:8091:

How to create new pages and components

Let’s understand how it all is put together and how to create new server-side rendered pages and components. I highly recommend to stop the created docker containers first and start the services locally. It makes debugging and monitoring more efficient:

1. Open the /fe folder in Visual Studio Code and run Storybook in the Terminal:

npm run storybook

2. Develop your new page or component under /fe/src:

3. “Hydrate” the components with actions in the index.js:

4. Create a story with Storybook under /fe/src/stories to preview it locally at http://localhost:9009:

5. Enable server-side rendering by referencing the component in /fe/server/middleware/renderer.js and start the Express server:

npm run ssr

6. Minify and copy bundled js and css assets to the ASP.NET Core Web application. To achieve it add the component to webpack.config.js and execute the command in Terminal:

npm run build-fe

7. Reference the assets in the ASP.NET Core View using Visual Studio 2019 by pointing asp-prerender-module and asp-prerender-data attributes to the new component, make sure that the server-side rendering endpoint “ServerSideRenderingEndpoint” in appSettings.development.json is set to http://localhost:3000 and “Start Debugging”:

Source Code and Quick Start Guide on GitHub

https://github.com/dawiddworak88/ASP.NET-Core-React-and-SSR

Share, Help and Subscribe to the Newsletter

Did you find this guide helpful? Please share it using the share buttons below. Subscribe to the newsletter to receive more tips and tricks regarding universal Web applications.

Did you find a problem? I’ll be more than happy to receive the pull requests with solution to improve the boilerplate. Please express your thoughts in the comments section below.

Do you need help? I encourage you to contact me directly via a contact form or LinkedIn. Please check the troubleshooting section on GitHub first because your problem might be already solved there 🙂

Disclaimer: This blog post has been prepared and accomplished by me in my personal capacity. The opinions expressed in this article are my own and do not reflect the view of my employer.