web-app-skeleton

This repository provides all the bits and pieces for an easy start to build your own web app or extension for ownCloud Infinite Scale.

Getting Started

The following instructions will help you to set up your own web app/extension and a proper development environment.

To get started, clone the repository and follow the instructions below.

Development Environment

Currently local development requires docker and is only supported on Linux and macOS.

1. Make sure you have a working docker- and docker compose environment running.

2. Install pnpm if you haven't already.

   Correct version: Our package.json holds a packageManager field. Please make sure that you have at least the same major version of pnpm installed.

   Corepack: We recommend to use pnpm with corepack to handle the pnpm version automatically.

3. Install dependencies and run a first build process by running:

   pnpm install && pnpm build:w

   In case you see errors about failed commands (such as Command "vite" not found) try to re-run the pnpm command.

4. Add 127.0.0.1 host.docker.internal to your /etc/hosts file to make sure the address host.docker.internal can be resolved locally.

5. Start the development server:

   docker compose up

6. Open your browser and navigate to https://host.docker.internal:9200 to see your oCIS dev environment. The default user is admin with password admin. Your app from this directory is automatically loaded.

Develop Your App

You can start developing your app by modifying the files in the src folder. The development server will automatically reload your changes as long as you keep a running process of pnpm build:w. In this setup you currently need a page reload to see your changes.

You should start by rephrasing the app name skeleton to your desired app name in the following files:

• package.json
• vite.config.ts
• dev/docker/ocis/apps.yaml (if you need config for your app)
• src/index.ts
• tests/unit/App.spec.ts

Don't forget to rename the root directory as well.

More details and examples about app/extension development are available in the developer documentation.

Once you have a working extension, consider making it available via git.

Testing

This repo holds the basic setup for unit testing with vitest. You can run the tests with:

pnpm test:unit

Feel free to structure your tests as you see fit. The test files are located in the tests/unit folder.

In case you want to set up e2e tests with playwright, you can see working examples in our repos web and web-extensions.

Build For Production

Running pnpm build will create a production build of your app in the dist folder. It also copies over all static assets placed in the public folder. You can then deploy the contents of the dist folder to your production environment, see app deployment.

Publish

We'd be happy to see your app in our awesome-ocis list. Feel free to make a pull request to the README.md file to add your app. If you feel that your app has reached a sufficient level of maturity and you want to publish it, please follow our publishing guide.