react-lite

.NET 6.0 simple + lite (npm-free) React SPA using TypeScript with integrated bundling + hot reloading

Browse source code and view live demo react-lite.web-templates.io

Install with x dotnet tool:

$ dotnet tool install -g x

$ x new LegacyTemplates/react-lite ProjectName

Alternatively write new project files directly into an empty repository, using the Directory Name as the ProjectName:

$ git clone https://github.com/<User>/<ProjectName>.git
$ cd <ProjectName>
$ x new react-lite

About

This template goal is to provide the richest suite of functionality with the least amount of complexity. TypeScript was adopted because it runs as a non-invasive global tool with no dependencies that enables us to use the latest JavaScript language features to be able to develop with the same source code as a fully-fledged npm webpack build system should you wish to upgrade to one in future.

Development workflow

All that's needed during development is to run TypeScript in "watch" mode:

$ tsc -w

Which monitors any changes to any .ts files and incrementally compiles their .js files on save. ServiceStack's built-in static files hot-reloading detects changes to any .js files to automatically reload the page, whilst the built-in dynamic .html page monitors for changes to any of its dependent resources.

In a new Terminal window start your .NET Web App HTTP Server with:

$ dotnet watch

Using watch run will monitor changes to C# source files where it will automatically re-build and restart the Server.

After changing your ServiceStack Services, you can re-generate their Typed TypeScript DTOs with:

$ x ts

Bundling

The integrated .js and .css bundling is configured to use a fast unminified in-memory bundle for an optimal development experience whilst it utilizes an advanced minified bundle in production releases.

When publishing, the project's Bundle task:

<Target Name="Bundle" BeforeTargets="AfterPublish">
    <Exec Command="x run _bundle.ss -to /bin/Release/net5/publish/wwwroot" />
</Target>    

Runs _bundle.ss to produce an optimized, minified & hashed bundle using ServiceStack's built-in bundling embedded in the dotnet tools which is pre-configured to use NUglify's advanced compression.

Publishing and Deployment

The standard .NET Core tools can be used to publish:

$ dotnet publish -c Release

Then deploy as normal, e.g. via rsync deployments to Linux or to an AWS EC2 container using Docker.