This is the next version of the debug client, intended to replace ../src/client
.
It is designed to work with the Transmodel GraphQL API.
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.
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
.
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.
Change directory to client
(current) if you haven't already.
npm install
Then
npm run build
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.