Skip to content

t-rosa/ReactWeaver

Repository files navigation

React Weaver

Full-stack starter that ships a production-ready ASP.NET Core API with a modern React front-end, wired together with Identity, EF Core, and a PostgreSQL dev database.

Template Quickstart (delete after scaffolding)

  1. Install the template
dotnet new install .
  1. Scaffold a new project
dotnet new full-stack-react -o MyProject

Every occurrence of ReactWeaver/react-weaver is replaced automatically. MyProject becomes my-project, so the generated README and configuration already point to the correct projects and secrets. Remove this section once you copy the template into a new repository.

Prerequisites

Recommended

Getting started

  1. Initialize git
git init
  1. Launch the database
docker compose up -d
  1. Configure required secrets
dotnet user-secrets init --project ReactWeaver.Server
dotnet user-secrets set "SMTP_USERNAME" "value" --project ReactWeaver.Server
dotnet user-secrets set "SMTP_PASSWORD" "value" --project ReactWeaver.Server
dotnet user-secrets set "ADMIN_EMAIL" "value" --project ReactWeaver.Server
dotnet user-secrets set "ADMIN_PASSWORD" "value" --project ReactWeaver.Server
dotnet user-secrets set "CONNECTION_STRING" "Host=localhost;Port=5432;Username=postgres;Password=postgres;Database=react-weaver;" --project ReactWeaver.Server
dotnet user-secrets set "OTEL_EXPORTER_OTLP_ENDPOINT" "http://react-weaver.aspire-dashboard:18889"
dotnet user-secrets set "OTEL_EXPORTER_OTLP_PROTOCOL" "grpc"
  1. Build the app
dotnet publish ReactWeaver.Server -o ReactWeaver.Server/bin/Production
  1. Launch the app
dotnet run --project ReactWeaver.Server
  • Execute automated tests:

Run the server end-to-end commands from the root, ReactWeaver directory.

dotnet test ReactWeaver.Tests

Run the client and end-to-end commands from the ReactWeaver.Client directory.

cd ReactWeaver.Client
npm run test
npx playwright test

Debug

  • VSCode
// .vscode/launch.json
{
  "configurations": [
    {
      "name": "Server",
      "type": "dotnet",
      "request": "launch",
      "projectPath": "${workspaceFolder}/ReactWeaver.Server/ReactWeaver.Server.csproj"
    },
    {
      "name": "Client",
      "runtimeArgs": ["run-script", "dev"],
      "runtimeExecutable": "npm",
      "skipFiles": ["<node_internals>/**"],
      "type": "node",
      "request": "launch",
      "cwd": "${workspaceFolder}/ReactWeaver.Client"
    },
    {
      "name": "Browser",
      "request": "launch",
      "type": "msedge",
      "url": "https://localhost:7000",
      "webRoot": "${workspaceFolder}/ReactWeaver.Client"
    }
  ],
  "compounds": [
    {
      "name": "Debug",
      "configurations": ["Server", "Client", "Browser"],
      "presentation": {
        "hidden": false,
        "group": "",
        "order": 1
      },
      "stopAll": true
    }
  ]
}

Production Preview

  1. Publish the container image
rm -rf ReactWeaver.Server/bin/Production/ && dotnet publish ReactWeaver.Server -t:PublishContainer -p ContainerArchiveOutputPath=../server.tar.gz -o ReactWeaver.Server/bin/Production
  1. Load the Docker image
docker load < server.tar.gz
  1. Stop any running containers
docker compose down
  1. Enable the preview service inside compose.yaml.

  2. Restart the stack

docker compose up -d
  1. Browse to http://localhost:3000.

Deployment

rm -rf ReactWeaver.Server/bin/Publish && dotnet publish ReactWeaver.Server -t:PublishContainer -p ContainerArchiveOutputPath=../react-weaver.tar.gz -o ReactWeaver.Server/bin/Publish

Migrations

From ReactWeaver.Server

dotnet ef migrations add MigrationName --project ReactWeaver.Server

Technologies

Server


Client

About

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published