EduIDE Landing Page

Landing page for EduIDE Cloud workspace management, providing a user-friendly interface for launching cloud-based development environments.

Features

User Authentication: Keycloak-based authentication and authorization
Workspace Management: Launch and manage multiple cloud-based IDEs
Dynamic Configuration: Runtime configuration via config.js
Query Parameters: Support for various URL parameters (gitUri, gitToken, artemisToken, etc.)
Responsive Design: Modern UI with dark/light theme support
3D Background: Interactive Vanta.js animated background

Prerequisites

Node.js: >= 20.19.0 (required by Vite 8)
npm: Latest stable version
Docker (for containerized deployment): Docker with Buildx support for multi-arch builds

Quick Start

Local Development

# Clone the repository
git clone https://github.com/EduIDE/EduIDE-Landing-Page.git
cd EduIDE-Landing-Page

# Install dependencies
npm install

# Start development server
npm run dev

The landing page will be available at http://localhost:5173

Build for Production

# Build the application
npm run build

# Preview the production build
npm run preview

The built files will be in the dist/ directory.

Docker Deployment

# Build the Docker image
docker build -t ghcr.io/EduIDE/eduidec-landing-page:latest .

# Run the container
docker run -d -p 80:80 ghcr.io/EduIDE/eduidec-landing-page:latest

Configuration

The landing page is configured via public/config.js. Create or modify this file to set up your environment:

window.theiaCloudConfig = {
  // Basic configuration
  serviceAuthToken: "your-service-auth-token",
  appName: "EduIDE",
  serviceUrl: "https://your-theia-cloud-instance.com",
  appDefinition: "your-app-definition",
  useKeycloak: true,
  useEphemeralStorage: true,

  // Keycloak configuration (if useKeycloak is true)
  keycloakAuthUrl: "https://your-keycloak-instance.com/auth",
  keycloakRealm: "your-realm",
  keycloakClientId: "your-client-id",

  // Landing page options
  disableInfo: false,
  infoTitle: "Welcome to EduIDE",
  infoText: "Your cloud-based IDE for education",
  loadingText: "Loading your workspace...",
  logoFileExtension: "png",
  pageTitle: "EduIDE Cloud",
  sentryEnable: true,
  sentryEnvironment: "production",
  // Optional override. If omitted, the default EduIDE Sentry DSN is used.
  sentryDsn: "https://examplePublicKey@sentry.example.com/123",

  // Additional apps to display
  additionalApps: [
    {
      serviceAuthToken: "app1-token",
      appName: "Python Environment"
    },
    {
      serviceAuthToken: "java-17-no-ls",
      appName: "Java 17 No-LS",
      image: "java-17"
    }
  ]
};

Configuration Options

Option	Type	Required	Description
`serviceAuthToken`	string	Yes	Service authentication token
`appName`	string	Yes	Application name
`serviceUrl`	string	Yes	Theia Cloud service URL
`appDefinition`	string	Yes	Application definition identifier
`useKeycloak`	boolean	Yes	Enable Keycloak authentication
`useEphemeralStorage`	boolean	Yes	Use ephemeral storage for workspaces
`keycloakAuthUrl`	string	Conditional	Keycloak auth server URL
`keycloakRealm`	string	Conditional	Keycloak realm name
`keycloakClientId`	string	Conditional	Keycloak client ID
`disableInfo`	boolean	No	Disable info banner
`infoTitle`	string	No	Info banner title
`infoText`	string	No	Info banner text
`loadingText`	string	No	Loading message text
`logoFileExtension`	string	No	Logo file extension (png, svg, etc.)
`sentryEnable`	boolean	No	Enable Sentry browser monitoring
`sentryEnvironment`	string	No	Sentry environment tag, e.g. namespace or deployment name
`sentryDsn`	string	No	Override the default EduIDE Sentry DSN
`additionalApps`	array	No	Additional apps to display
`footerLinks`	object	No	Footer link configuration

Each entry in additionalApps may optionally include image (or Image for compatibility). When omitted, the landing page keeps the current behavior and derives the logo path from appName. Apps may also set visible: false to stay launchable through direct appDef URLs without appearing on the landing page. Visibility defaults to true and does not need to be configured for visible apps. When provided, the landing page uses the image value like this:

Plain name like java-17 becomes /assets/logos/java-17-logo.png
Filename like java-17-logo.png becomes /assets/logos/java-17-logo.png
Absolute path like /custom/logo.png is used as-is

Query Parameters

The landing page supports various URL query parameters to pre-configure the session:

Parameter	Type	Description
`appDef`	string	Application definition to launch
`gitUri`	string	Git repository URL to clone
`gitUser`	string	Git username for authentication
`gitMail`	string	Git email for authentication
`artemisUrl`	string	Artemis service URL
`artemisToken`	string	Artemis authentication token

Auto-clone and private repositories: On session start the repository is cloned from gitUri exactly as provided; no credential is added. For a private repository the credential must be embedded in gitUri itself, for example https://<user>:<token>@host/org/repo.git. A plain gitUri without embedded credentials only works for public repositories. Because gitUri may contain a token, treat the URL as sensitive.

Example: https://your-landing-page.com/?appDef=myapp&gitUri=https://github.com/user/repo.git

NPM Scripts

Script	Description
`npm run dev`	Start development server
`npm run build`	Build for production
`npm run preview`	Preview production build
`npm run typecheck`	Run TypeScript type checking
`npm run lint`	Run ESLint linter
`npm run lint:fix`	Auto-fix linting issues
`npm run format`	Format code with Prettier
`npm run format:check`	Check code formatting

Keycloak Setup

To enable Keycloak authentication:

Create a Keycloak client in your Keycloak instance
Configure the client with the following settings:
- Client Protocol: openid-connect
- Access Type: confidential or public (depending on your setup)
- Valid Redirect URIs: Your landing page URL (e.g., http://localhost:5173/* for dev)
- Web Origins: Your landing page URL
Update public/config.js with your Keycloak configuration

Development Guide

Project Structure

EduIDE-Landing-Page/
├── src/
│   ├── components/          # React components
│   │   ├── AppLogo.tsx
│   │   ├── ErrorComponent.tsx
│   │   ├── Footer.tsx
│   │   ├── Header.tsx
│   │   ├── Imprint.tsx
│   │   ├── Info.tsx
│   │   ├── LaunchApp.tsx
│   │   ├── Loading.tsx
│   │   ├── LoginButton.tsx
│   │   ├── Privacy.tsx
│   │   ├── SelectApp.tsx
│   │   ├── Spinner.tsx
│   │   ├── ThemeToggle.tsx
│   │   └── VantaBackground.tsx
│   ├── contexts/            # React contexts
│   │   └── ThemeContext.tsx
│   ├── App.tsx              # Main application component
│   ├── App.css              # Application styles
│   └── main.tsx             # Entry point
├── public/                  # Static assets
│   ├── assets/              # Images, logos, etc.
│   ├── config.js            # Runtime configuration
│   └── favicon.ico
├── .github/workflows/       # CI/CD workflows
│   └── docker-build.yml
├── Dockerfile               # Multi-stage Docker build
├── nginx.conf               # Nginx configuration
├── vite.config.ts           # Vite build configuration
├── tsconfig.json            # TypeScript configuration
└── package.json             # Project dependencies

Adding New Features

Add React Components: Place in src/components/
Update Configuration: Modify public/config.js for runtime changes
Add Dependencies: Add to package.json and run npm install
Update Styles: Modify src/App.css or component-specific CSS files

Dependency Updates

This project uses npm and commits both package.json and package-lock.json. Prefer a conservative update first, then handle major upgrades separately.

Check the current working tree and dependency status:
```
git status --short
npm outdated
npm audit
```
Update dependencies within the existing package.json semver ranges:
```
npm update
```
If direct dependency ranges should be raised to the versions now installed, update package.json and reconcile the lockfile:
```
npm install --package-lock-only
```
Review major upgrades from npm outdated individually. Do not batch unrelated major upgrades unless you also verify the related code/config changes. Keep coupled packages on compatible versions, for example:
```
npm install -D @typescript-eslint/eslint-plugin@latest @typescript-eslint/parser@latest
```
Verify the result:
```
npm run build
npx eslint . --ext ts,tsx --report-unused-disable-directives --quiet
npm audit
```
The normal npm run lint command treats warnings as failures because it uses --max-warnings 0. Use the errors-only ESLint command above to confirm that dependency updates did not introduce blocking lint errors, then address warnings separately if needed.

Review and commit the dependency update:

git diff -- package.json package-lock.json
git status --short

If npm audit reports a vulnerability with fixAvailable: false, identify the owning direct dependency and check whether a newer compatible release changes the vulnerable transitive dependency. If no compatible release fixes it, document the residual advisory in the pull request.

Troubleshooting

Build Fails with TypeScript Errors:

# Check TypeScript errors
npm run typecheck

Lint Errors:

# Auto-fix linting issues
npm run lint:fix

Docker Build Fails:

Ensure Docker daemon is running
Check Node.js version (>= 20.0.0)
Verify package-lock.json is present

404 Errors in Production:

Ensure base path in vite.config.ts matches your deployment path
Check nginx.conf routing configuration

CI/CD

This project uses GitHub Actions for automated Docker builds and multi-architecture support.

Workflow Triggers

Push to main: Builds and pushes to latest tag
Pull Request: Builds image for testing
Manual Dispatch: Build on demand with version tag

Build Platforms

linux/amd64
linux/arm64

Image Registry

Built images are pushed to: ghcr.io/EduIDE/eduidec-landing-page

License

EPL-2.0 OR GPL-2.0 WITH Classpath-exception-2.0

Contributing

Contributions are welcome! Please follow these guidelines:

Fork the repository
Create a feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

Support

For issues and questions:

GitHub Issues: https://github.com/EduIDE/EduIDE-Landing-Page/issues
Documentation: EduIDE Docs

Related Projects

EduIDE-Cloud: Main EduIDE Cloud project
EduIDE-deployment: Kubernetes deployment for EduIDE Cloud

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
public		public
scripts		scripts
src		src
.dockerignore		.dockerignore
.editorconfig		.editorconfig
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierrc.json		.prettierrc.json
AGENTS.md		AGENTS.md
CLAUDE.md		CLAUDE.md
Dockerfile		Dockerfile
LICENSE		LICENSE
README.md		README.md
index.html		index.html
nginx.conf		nginx.conf
package-lock.json		package-lock.json
package.json		package.json
renovate.json		renovate.json
tsconfig.json		tsconfig.json
tsconfig.node.json		tsconfig.node.json
vite.config.ts		vite.config.ts

Navigation Menu

Repository files navigation

EduIDE Landing Page

Features

Prerequisites

Quick Start

Local Development

Build for Production

Docker Deployment

Configuration

Configuration Options

Query Parameters

NPM Scripts

Keycloak Setup

Development Guide

Project Structure

Adding New Features

Dependency Updates

Troubleshooting

CI/CD

Workflow Triggers

Build Platforms

Image Registry

License

Contributing

Support

Related Projects

About

Releases

Packages

Used by

Contributors

Languages

Latest commit

History

Folders and files

Repository files navigation

EduIDE Landing Page

Features

Prerequisites

Quick Start

Local Development

Build for Production

Docker Deployment

Configuration

Configuration Options

Query Parameters

NPM Scripts

Keycloak Setup

Development Guide

Project Structure

Adding New Features

Dependency Updates

Troubleshooting

CI/CD

Workflow Triggers

Build Platforms

Image Registry

License

Contributing

Support

Related Projects

About

Resources

Security policy

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages