---
title: React SPA Project Template
---
## ServiceStack React SPA Template
The new TypeScript [Vite React SPA template](https://react-spa.react-templates.net) is an enhanced version of .NET's
built-in ASP.NET Core React SPA template with many new value-added and high-productivity features.
Vite React SPA Template
Explore the high productivity features in the new ServiceStack React SPA template
## ASP.NET Core React SPA Template
The [React and ASP.NET Core](https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-asp-net-core-with-react)
template provides a seamless starting solution which runs both the .NET API backend and Vite React frontend during development.
It's a modern template enabling an excellent developer workflow for .NET React Apps, configured with Vite's fast
HMR (Hot Module Reload), TypeScript support with TSX enabling development of concise and expressive type-safe components.
### Minimal API integration
Whilst a great starting point, it's still only a basic template configured with a bare-bones React Vite App that's modified
to show an example of calling a Minimal API.
### Built-in API Integration
Although the approach used isn't very scalable, with a proxy rule needed for every user-defined API route:
```ts
export default defineConfig({
//...
server: {
proxy: {
'^/weatherforecast': {
target,
secure: false
}
},
}
})
```
And the need for hand maintained Types to describe the shape of the API responses with [Stringly Typed](https://wiki.c2.com/?StringlyTyped)
fetch API calls referencing **string** routes:
```ts
interface Forecast {
date: string;
temperatureC: number;
temperatureF: number;
summary: string;
}
function App() {
const [forecasts, setForecasts] = useState();
useEffect(() => {
populateWeatherData();
}, []);
//...
}
async function populateWeatherData() {
const response = await fetch('weatherforecast');
const data = await response.json();
setForecasts(data);
}
```
Which is used to render the API response in a hand rolled table:
```tsx
function App() {
//...
const contents = forecasts === undefined
?
Loading... Please refresh once the ASP.NET backend has started. See
jsps for more details.
:
Date
Temp. (C)
Temp. (F)
Summary
{forecasts.map(forecast =>
{forecast.date}
{forecast.temperatureC}
{forecast.temperatureF}
{forecast.summary}
)}
;
}
```
### ServiceStack API Integration
Fortunately ServiceStack can significantly improve this development experience with the
[/api pre-defined route](https://docs.servicestack.net/endpoint-routing#api-pre-defined-route) where only a single
proxy rule is needed to proxy all APIs:
```ts
export default defineConfig({
//...
server: {
proxy: {
'^/api': {
target,
secure: false
}
},
}
})
```
### End-to-end Typed APIs
Instead of hand-rolled types and Stringly Typed API calls, it utilizes server
[generated TypeScript DTOs](https://docs.servicestack.net/typescript-add-servicestack-reference)
with a generic JsonServiceClient to enable end-to-end Typed APIs:
```ts
import { useState, useEffect } from "react"
import { useClient } from "@/gateway"
import { GetWeatherForecast } from "@/dtos"
const client = useClient()
const [forecasts, setForecasts] = useState([])
useEffect(() => {
(async () => {
const api = await client.api(new GetWeatherForecast())
if (api.succeeded) {
setForecasts(api.response!)
}
})()
}, [])
```
This benefits in less code to maintain, immediate static typing analysis to ensure correct usage of APIs and valuable
feedback when APIs are changed, that's easily updated with a single command:
:::sh
npm run dtos
:::
### React Component Ecosystem
Given it's popularity, React has arguably the richest ecosystem of freely available libraries and components, a good
example are the popular [shadcn/ui](https://ui.shadcn.com) Tailwind components. Unlike most libraries they're source copied
piecemeal into your project where they're locally modifiable, i.e. instead of an immutable package reference.
As they're just blueprints, they're not dependent on a single library and will utilize the best library to implement
each component if needed. E.g. the [Data Table](https://ui.shadcn.com/docs/components/data-table) component documents how to implement
your own Data Table utilizing the headless [TanStack Table](https://tanstack.com/table/latest) - a version of which
we've built into [DataTable.tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/components/DataTable.tsx)
which is used in the template to implement both complex CRUD UIs and
[weather.tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/pages/weather.tsx) simple table results:
```tsx
import { columnDefs, DataTable, getCoreRowModel } from "@/components/DataTable.tsx"
const columns = columnDefs(['date', 'temperatureC', 'temperatureF', 'summary'],
({ temperatureC, temperatureF}) => {
temperatureC.header = "Temp. (C)"
temperatureF.header = "Temp. (F)"
temperatureC.cell = temperatureF.cell = ({ getValue }) => <>{getValue()}°
})
return ()
```
To render the [/weather](https://react-spa.react-templates.net/weather) customized Data Table:
:::{.mx-auto .max-w-lg .shadow .rounded}
[](https://react-spa.react-templates.net/weather)
:::
The template also includes customizable [Form.tsx](https://github.com/NetCoreTemplates/react-spa/blob/main/MyApp.Client/src/components/Form.tsx)
Input components which can be used to create beautiful validation-bound forms which effortlessly integrates with ServiceStack's
[Error Handling](https://docs.servicestack.net/error-handling) and
[Declarative Validation](https://docs.servicestack.net/declarative-validation) attributes.
## ServiceStack React SPA Features
Other high-productivity features available in the ServiceStack React SPA template include:
### Integrated Identity Auth
Pre-configured with ASP.NET Core Identity Auth, including Sign In and Custom Registration APIs and
UI Pages which can be customized as needed, examples of Role-based security as well as a turn key solution for
Integrating Identity Auth Registration workflow with your [SMTP Provider](https://docs.servicestack.net/auth/identity-auth#smtp-iemailsender)
with all emails sent from a managed non-blocking [Background MQ](https://docs.servicestack.net/background-mq)
for optimal responsiveness and execution.
### tailwindcss
[Tailwind](https://tailwindcss.com) has quickly become the best modern CSS framework for creating scalable,
[mobile-first](https://tailwindcss.com/#mobile-first) responsive websites built
upon a beautiful expert-crafted constraint-based [Design System](https://tailwindcss.com/#constraint-based)
that enables effortless reuse of a growing suite of [Free Community](https://tailwindcomponents.com) and
professionally-designed [Tailwind UI Component](https://tailwindui.com) Libraries, invaluable for quickly creating beautiful websites.
[](https://tailwindcss.com)
In addition to revolutionizing how we style mobile-first responsive Apps, Tailwind's
[Dark Mode](https://tailwindcss.com/#dark-mode) does the same for enabling Dark Mode
a feature supported throughout the template and its Tailwind UI Components.
[](https://tailwindcss.com/#dark-mode)
### Built for Productivity
So that you're immediately productive out-of-the-box, the template includes a rich set of high-productivity features, including:
| | |
|---------------------------------------------------------------------|--------------------------------------------------------------|
| [tailwind/typography](https://tailwindcss-typography.vercel.app) | Beautiful css typography for markdown articles & blog posts |
| [tailwind/forms](https://github.com/tailwindlabs/tailwindcss-forms) | Beautiful css form & input styles that's easily overridable |
| [Markdown](https://mdxjs.com/docs/getting-started/) | Native [mdx](https://mdxjs.com) Markdown integration |
| [React Router](https://reactrouter.com) | Full featured routing library for React |
| [plugin/press](https://github.com/ServiceStack/vite-plugin-press) | Static markdown for creating blogs, videos and other content |
| [plugin/pages](https://github.com/hannoeru/vite-plugin-pages) | Conventional file system based routing for Vite |
| [plugin/svg](https://github.com/pd4d10/vite-plugin-svgr) | Load SVG files as React components |
| [Iconify](https://iconify.design) | Unified registry to access 100k+ high quality SVG icons |
### Bookings CRUD Pages
The [Bookings CRUD example](https://react-spa.react-templates.net/bookings-crud) shows how you can utilize a customized
Data Table and templates Form components to create a beautifully styled CRUD UI with minimal effort.
## Vite Press Plugin
[](https://vue-spa.web-templates.io/posts/vite-press-plugin)
Most Apps typically have a mix of dynamic functionality and static content which in our experience is best maintained
in Markdown, which is why excited about the new [Vite Press Plugin](https://vue-spa.web-templates.io/posts/vite-press-plugin)
which brings the same Markdown features in our
[razor-ssg](https://razor-ssg.web-templates.io), [razor-press](https://razor-press.web-templates.io) and our
[blazor-vue](https://blazor-vue.web-templates.io) templates, and re-implements them in Vite where they can be used
to add the same rich content features to Vite Vue and Vite React Apps.
A goal for vite-press-plugin is to implement a suite of universal markdown-powered features that can be reused across all
our Vue, React and .NET Razor and Blazor project templates, allowing you to freely copy and incorporate same set of
markdown feature folders to power markdown content features across a range of websites built with different technologies.
All of Razor SSG's features are available in Vite Press Plugin, including:
- [Blog](https://vue-spa.web-templates.io/blog) - Full Featured, beautiful Tailwind Blog with multiple discoverable views
- [What's New](https://vue-spa.web-templates.io/whatsnew) - Build Product and Feature Release pages
- [Videos](https://vue-spa.web-templates.io/videos) - Maintain Video Libraries and Playlists
- [Metadata APIs](https://vue-spa.web-templates.io/posts/vite-press-plugin#metadata-apis-feature) - Generate queryable static .json metadata APIs for all content
- [Includes](https://vue-spa.web-templates.io/posts/vite-press-plugin#includes-feature) - Create and reuse Markdown fragments
It also supports an enhanced version of markdown for embedding richer UI markup in markdown content where most of
[VitePress Containers](https://vitepress.dev/guide/markdown#custom-containers) are supported, including:
- [Custom Markdown Containers](https://vue-spa.web-templates.io/posts/vite-press-plugin#markdown-containers)
- **Alerts**
- `info`
- `tip`
- `warning`
- `danger`
- `copy`
- `sh`
- `youtube`
- [Markdown Fenced Code Blocks](https://vue-spa.web-templates.io/posts/vite-press-plugin#markdown-fenced-code-blocks) - Convert fenced code blocks into Richer UIs
### React Components In Markdown
At the cost of reduced portability, you’re also able to embed richer Interactive Vue components directly in markdown:
- [React Components in Markdown](https://react-spa.react-templates.net/posts/markdown-components-in-react)