Multiple UI frameworks example

This example demonstrates how to use multiple UI frameworks in a single Phoria project.

You can use this example as a template for your own project by running:

npx giget@latest gh:cmeeg/phoria-examples/examples/framework-multiple <target_dir>

Important

You will need to replace:

• <target_dir> with the name of the local directory you want to clone the example project to

Usage

Note

See the Phoria docs for general usage information.

Once cloned you will need to install the dependencies:

corepack enable pnpm
pnpm install

Then you can run the project in dev mode:

# Add dev certs
dotnet dev-certs https --trust

# Start the Phoria Server
pnpm dev

# Start the Phoria Web App
# You will need to run this in a separate terminal instance/tab to the Phoria Server
dotnet run --project WebApp/WebApp.csproj --launch-profile Development

Or build the project for production:

# Build the project
pnpm build

# Preview the production build
pnpm preview

Or run the production build in a Docker container:

# Build the container image
docker build -f ./WebApp/Dockerfile -t phoriaapp:latest .

# Run the container image (and browse on http://localhost:3001)
docker run --name phoriaapp -d -p 3001:8080 phoriaapp:latest

# Stop the container image
docker stop phoriaapp

# Remove the container image
docker rm phoriaapp

Note

You will need to have Docker Desktop installed before running the above commands.