React Router

This section describes the integration of React Router applications on monolayer, including supported platform capabilities, automatic database detection, and custom launch configurations using a Procfile.

Introduction to React Router on monolayer

React Router is a flexible library and full-stack framework for React applications. monolayer provides robust support for React Router applications, featuring automatic configuration of database services and customizable launch environments.

When you deploy a React Router application, monolayer automatically builds your static assets and configures the runtime environment to serve your application efficiently.

React Router Platform Capabilities

Server-rendered React Router applications support managed databases, object storage, lifecycle processes, background tasks, realtime broadcasts, and Procfile cron jobs.

Managed PostgreSQL Database

monolayer automatically provisions a fully managed PostgreSQL database when it detects PostgreSQL usage in your React Router project.

• Automatic detection. The system checks your project dependencies for PostgreSQL database drivers.
• Database provisioning. Upon detection, monolayer provisions a PostgreSQL database in your AWS account.
• Connection injection. monolayer injects secure database access details into your environment variables automatically, ensuring that no manual database configuration is needed.

Detection Conditions

monolayer automatically detects your database configuration when your project satisfies the following conditions:

• Server-Side Rendering (SSR): Your React Router configuration must either omit the ssr option or set ssr: true.
• Database dependencies: Your project must define either pg or postgres as a dependency in your package.json file.

When monolayer detects PostgreSQL usage, it automatically creates the following database lifecycle workloads:

• Database creation (createDatabase):
  • If your package.json contains a db:create script, the workload runs db:create.
  • If db:create is missing but db:migrate exists, the workload runs db:migrate.
  • This lifecycle workload runs only once.
• Database migrations (migrateDatabase):
  • If your package.json contains a db:migrate entry, the workload runs db:migrate.
  • This lifecycle workload runs before deploying the application.

Runtime Environment Variables

At runtime, monolayer automatically injects the following environment variables into your application environment:

• DATABASE_URL: The full connection string used to connect to your PostgreSQL database.
• PGPASSWORD: The secure password for database authentication.
• PGUSER: The username for your database.
• PGHOST: The endpoint host address of your database.
• PGPORT: The port number used to connect to your database instance.
• PGDATABASE: The name of your PostgreSQL database.

Application Lifecycle Workloads

You can execute custom scripts and tasks during specific phases of your deployment lifecycle. For more information on process configurations, see the Procfile Guide.

• Deployment orchestration. You can run database migrations or prepare data using Procfile-managed commands before or after your web server starts.
• Zero-ops environment. The platform coordinates the initialization of resources so your lifecycle scripts execute in the correct order.

For React Router applications, you can define custom processes in a root Procfile to run lifecycle workloads when deploying your application.

bootstrap: _your-command_
beforeRollout: _your-command_
afterRollout: _your-command_
createDatabase: _your-command_
migrateDatabase: _your-command_

React Router can also contribute createDatabase and migrateDatabase automatically when it detects PostgreSQL and matching package scripts. Lifecycle definitions in workload files aren't deployed.

SDK Workloads

Server-rendered React Router applications support Task and Broadcast workloads defined with the monolayer SDK.

• Asynchronous background tasks. You can queue long-running work and process it outside the web request.
• Realtime broadcasts. You can send live updates to connected clients through managed WebSocket infrastructure.
• Workloads directory. You can store workload definitions in the default workloads directory or configure workloadsPath in monolayer.config.ts.

Static React Router single-page applications with ssr: false don't support SDK workloads because they don't include a server runtime.

Object Storage with Buckets

Server-rendered React Router applications can define managed object storage buckets with the monolayer SDK.

• Managed buckets. monolayer provisions Amazon Simple Storage Service (Amazon S3) buckets in your AWS account.
• Scoped access. Your application receives permission to access only its defined buckets and object paths.
• SDK configuration. Use the monolayer SDK to define each bucket and the AWS SDK to upload or download objects.

Scheduled Cron Jobs

Define recurring commands in your root Procfile. A cron process name must start with cron- and include a quoted, five-field SCHEDULE value before the command.

Listing 1 schedules a synchronization command every 10 minutes.

cron-sync: SCHEDULE="*/10 * * * *" npm run sync

Cron definitions in workload files aren't deployed. For more information, see Procfile cron processes.