Docs / Your own front end

Your own front end

Your workspace can run an interface you own. Jourier builds it from a GitHub repository in your organisation and serves it at your workspace address, <workspace>.jourier.dev. Sign-in, data and integrations stay behind the workspace API, exactly as before.

How the connection works

  1. In your workspace, open Connect in the sidebar and choose Connect GitHub. GitHub asks you to install the Jourier Platform app on your organisation and to pick the repositories it may see.
  2. Back in the workspace, choose an empty repository and a branch. The list shows only empty repositories; create one on GitHub if you need to.
  3. Jourier writes the current workspace interface into that repository as one commit. That is the only commit Jourier makes.
  4. From then on, every push to the branch builds on the platform and goes live at your workspace address, usually within a minute.

The sidebar pill reads Connected once a repository is attached. It opens the same dialog, which shows the repository, the branch, the last commit, the releases and the Development section.

Connecting freezes your interface at the version you take. Jourier’s later interface work does not reach it; integrations, data and platform features keep arriving through the API. The API never removes or renames what it already answers, so a front end you built keeps working.

What the repository contains

The seed is the workspace interface as a plain Vite and React project.

Path What it is
src/ The application. App.tsx holds the routes, pages/ the screens, components/ the shared pieces, i18n/ the English and Finnish strings, api.ts every call to the workspace API.
src/vendor/ui and src/vendor/kit Jourier’s interface library and dashboard kit, copied in so the project builds with public npm packages only.
public/ Static files: brand assets, logos, product and integration images.
index.html The page the browser loads.
vite.config.ts The build and the development proxy. Keep it; see below.
tsconfig.json TypeScript settings, pointing at src/vendor.
package.json, package-lock.json Dependencies. The lockfile is required.
jourier.json The platform’s build settings: the seed version, the output folder, whether install scripts run.
README.md, LICENSE, .gitignore The usual. The code is yours under the MIT licence.

A few files from Jourier’s own image build come along (Dockerfile, nginx.conf, vitest.config.ts, scripts/). The platform build does not use them.

Running it locally

You need a personal development token from the workspace (see Development tokens). Then, in the repository:

export API_PROXY_TARGET=https://<workspace>.jourier.dev
export JOURIER_DEV_TOKEN=jdt_...
npm install
npm run dev

http://localhost:5173 now shows your workspace with your live data, as you. Every saved file reloads the page. The token travels only on calls to /api; sign-in stays on the platform.

Type the three lines as three lines. A single long line wraps in most terminals and pastes broken.

Keep the Vite configuration

vite.config.ts in the seed maps @ui and @jourier/kit to src/vendor. That is what lets the repository build on its own. A configuration copied from Jourier’s monorepo points at ../../packages, which does not exist in your repository, and the build fails at once. Add to the file if you need to; do not replace it.

When a build fails

The last good release stays live. Nothing changes for the people using the workspace.

The person who connected the repository receives an e-mail with the reason. Jourier is alerted as well, since the build ran on our platform. In the workspace, the Connected dialog shows the reason on one line and the full build log when you hover it. Fix the commit and push again, or press Rebuild. Earlier releases stay in the list; Make live puts any of them back.

What /jourier/ is

Four paths on your workspace address belong to the platform and are never served from your repository: /api, /auth, /healthz and /jourier.

/jourier/ is Jourier’s own interface, running beside yours. It is where the Connected dialog, Settings, Users & access, the Marketplace and the data schema page live. Your interface can link there whenever a Jourier screen is the right tool.

Rules the platform applies to the build

  • A lockfile is required.
  • Install scripts are off. Set install.scripts to true in jourier.json to run them.
  • The output folder is dist, or what output in jourier.json names, and must contain index.html.
  • The build has fifteen minutes, two gigabytes of memory, and reaches the npm registry and nothing else.
  • Your pages run under a content security policy: they load what your repository ships and talk to your own workspace API, nothing else.

Who sees what

The front end changes how the workspace looks, not what a person is allowed to see. The API answers every call according to the signed-in person, whatever interface made the call.

  • Internal members (an e-mail on your verified domain) see the dashboards granted to them; admins see everything and manage the workspace.
  • External members, such as an accountant, a consultant or a board member, see only the dashboards granted to them. They hold no product seats, are never admins, and their membership ends on the date the admin sets, ninety days by default.
  • A development token carries the same limits as the person who created it.
  • Anyone who can push to the connected branch changes the interface for everyone. Manage that in GitHub the way you manage the rest of your code.

Disconnecting

Disconnect in the dialog. The workspace returns to Jourier’s interface at once. Your repository is untouched and stays yours.

Questions

aleksi.stenberg@jourier.com

Start with your own workspace.

Sign in with Microsoft or Google. Your workspace is ready the same day. Free for a month.