mirror of https://github.com/opentripplanner/OpenTripPlanner.git synced 2025-06-15 20:30:35 +02:00

History

renovate[bot] 36b2175513 fix(deps): update debug ui dependencies (non-major)		2025-06-10 01:48:38 +00:00
..
src	Rename and move types file to clarify intent	2025-03-13 20:20:25 +01:00
.env	Use '/otp/debug/vectortiles' path	2025-05-15 21:08:44 +02:00
.env.development	Use '/otp/debug/vectortiles' path	2025-05-15 21:08:44 +02:00
.gitignore	Updates for eslint v9	2025-01-02 16:45:15 +01:00
.npmrc	Rename folder from 'client-next' to 'client'	2024-06-21 12:05:47 +02:00
.prettierignore	Updates to ignore prettier formatting of generated file.	2025-01-22 13:46:14 +01:00
codegen-preprocess.ts	Fixed link from external to internal schema.	2025-01-23 12:51:57 +01:00
codegen.ts	Fixed some styling	2025-01-15 12:58:10 +01:00
eslint.config.mjs	Updates for eslint v9	2025-01-02 16:45:15 +01:00
index.html	Add whitespace so that a new client version is built	2025-01-28 11:49:20 +01:00
package-lock.json	fix(deps): update debug ui dependencies (non-major)	2025-06-10 01:48:38 +00:00
package.json	fix(deps): update debug ui dependencies (non-major)	2025-06-10 01:48:38 +00:00
prettier.config.mjs	Updates for eslint v9	2025-01-02 16:45:15 +01:00
README-vite.md	Rename folder from 'client-next' to 'client'	2024-06-21 12:05:47 +02:00
README.md	Update src location in docs	2024-10-15 21:18:59 +03:00
tsconfig.json	Rename folder from 'client-next' to 'client'	2024-06-21 12:05:47 +02:00
tsconfig.node.json	Rename folder from 'client-next' to 'client'	2024-06-21 12:05:47 +02:00
vite.config.ts	Rename folder from 'client-next' to 'client'	2024-06-21 12:05:47 +02:00

README.md

OTP debug client (next)

This is the next version of the debug client, intended to replace ../src/client.

It is designed to work with the Transmodel GraphQL API.

Stack notes

This is a true Single Page Application (SPA) written in TypeScript on the React framework. It uses vite to run (locally) and for building static assets. It requires no server runtime, and can be served from a CDN and run entirely in the browser.

The design framework is Bootstrap with React support from react-bootstrap.

The map framework is MapLibre, using MapLibre GL JS with React support from react-map-gl.

GraphQL integration is provided by graphql-request, with type support added with @graphql-codegen. Types are generated during build and are not checked into the repository.

Prerequisites

Use latest LTS version of Node/npm (currently v18). Recommend using a version manager such as nvm.

The dev and production builds require graphql schema to be present at ../application/src/main/resources/org/opentripplanner/apis/transmodel/schema.graphql.

Getting started (development)

Change directory to client (current) if you haven't already.

npm install

Then

npm run dev

The debug client will now be available at http://localhost:5173/. It has hot reloading enabled, so you don't have to restart it when you save files.

If you change graphql code during development you can issue the following command:

npm run codegen

You don't have to restart the development server for the changes to take effect.

Build for production

Change directory to client (current) if you haven't already.

npm install

Then

npm run build

Which OTP instance do I use?

In development mode, the debug client by default assumes you are running an OTP instance locally at port 8080 (see .env.development). If you wish to point to a different OTP instance (like a remote server), use the environment variableVITE_API_URL, either at the command line, or add it to a new .env.development.local file (this file will be ignored by git).

In production mode, the default is to access OTP via the same origin as the client (see .env). This behavior can also be modified by changing the previously mentioned environment variable at build-time.