create-react-app and ASP.NET MVC 5 – Introduction

This post is a part of a series on integrating react and ASP.NET.

What: create-react-app on Episerver
Why: create-react-app is easy. react and Episerver are powerful.

create-react-app is the starter project for getting up and running quickly with the ReactJS frontend framework. It’s the training wheels for React; you don’t have to figure out webpack. I want to use it to enhance an ASP.NET MVC 5 site with rich components.

Prior Art

There’s a lot out there about react and .NET. Some good starting places:

ReactJS.NET

ReactJS.Net can be used on ASP.NET MVC5 and ASP.NET Core. It also includes features to do transpilation on the fly with a babel HttpHandler. We won’t use the later, but the server-side rendering feature it provides is crucial for allowing your pages to be crawled.

Why

My team wants to use React because

  • It’s a way to write maintainable and composable frontend components
  • It has a wide variety of libraries available from the react community
  • It’s performant client-side
  • It can be used for a wide variety of project sizes, from a few small components, to a full SPA

However, I don’t have as much time as I would like to constantly keep up to date with ALL the new features in the Javascript world. create-react-app takes care of creating a feature-rich development environment that is easy to use.

Some caveats

Build system

It’s somewhat brittle and difficult to modify if you decide to change your project architecture

Performance

I’ve heard from some that ReactJS.Net is slow (but, it seems fast enough for the way we use it)

Memory Management

I’ve seen memory leaks when using alternate JS engines. However, I haven’t had any problems with the default JS engine, IE11. PeteDuncanson says you can fix with some cleanup code.

JS Features

You need to shim some features server-side (the IE11 JS engine is somewhat limiting in this respect)

Development quirks

When using the create-react-app development server as a proxy in front of your website, you must manually navigate to /default instead of /

Multisite

Currently only supports using one domain at a time in development. You can develop on multiple, but must change proxy settings to work on a different one.

What we’ll cover

  • Getting the Episerver quicksilver project
  • Setting up create-react-app in a separate project
  • Setting up the express proxy
  • Installing NPM Task Runner for VS’s Task Runner Explorer extension
  • Using ReactJS.Net for getting your components into your ASP.NET app and server-side rendered
  • Setting up server shims for server-side rendering in production
  • Setting up routing integration between EPiServer and react-router
  • Tips for troubleshooting server-side bugs
  • Deployment considerations

What we won’t cover

In part II we’ll install Quicksilver

 –

Tags:
Category:

Leave a Reply

Your email address will not be published. Required fields are marked *