This repository contains the source of the JabRef homepage.
alice@jabref.org / EBNPXY35TYkYXHs
.The simplest way to start is by opening this project in Gitpod.
.env
file in the root containing the connection URL for the database, e.g. DATABASE_URL="postgresql://user:password@localhost:5432/jabref?schema=public"
.pnpm docker:redis
.
If you do not use this command, make sure that Redis is available through the port 6380
or, alternatively, add the configuration REDIS_PORT=<your port>
to the .env
file.pnpm install
to install all dependencies.pnpm prisma:migrate:dev
to initialize the database. You may also want to use pnpm prisma:seed
to fill the database with some initial test data.Now you can start the server by using pnpm dev
.
If you use Visual Studio Code, you might also want to activate automatic tasks which would then be run whenever you open the project and run the usual commands to get you running in no time. For this, open the command palette (Shift + Cmd + P) and choose "Tasks: Manage Automatic Tasks in Folder". Then accept "Allow Automatic Tasks in Folder". Now close and re-open the workspace.
Command | Description |
---|---|
pnpm install | Install project dependencies and generate code. |
pnpm dev | Start Nuxt server in development mode with hot reloading enabled. Listen on http://localhost:3000. The GraphQL API is then accessible at http://localhost:3000/api |
pnpm test | Execute all tests. Pass -u to update all snapshots. |
pnpm build | Build the nuxt.js web application for production. |
pnpm start | Start the production server built by pnpm build (for testing purposes). |
pnpm prisma:studio | Explore data in the database using a visual editor. |
pnpm storybook | Start Storybook in your browser. |
schema.prisma
.pnpm prisma:push
to push the changes to the local database.pnpm prisma:migrate:dev
to generate new migration based on the schema changes.See Prisma documentation for more details.
As the primary UI development flow, we use Storybook which allows developing UI components in isolation without the need to start the whole application.
Storybook uses so-called stories.
Each story represents a single visual state of a component.
For each component its stories should be placed in the same directory, with the suffix .stories.ts
appended.
For example,
components
│ Button.vue
│ Button.stories.ts
To start developing with Storybook, simply run pnpm storybook
, which opens Storybook in the browser.
An up-to-date version of all Storybook components can be found online.
Resolver
aggregates the data, and transforms in a representation suitable for the domain layer.Service
performs input validation, authorization, sorting, and implements the business logic.api
contains the backend.assets
contains uncompiled assets such as styles, images, or fonts. The content of this folder will be processed by webpack, e.g. CSS has pre-processor applied.components
is where we put all our Vue.js components which are then imported into the pages.layouts
contains the layouts that determine the look and feel. Nuxt documentation.middleware
defines custom functions that are run before rendering either a page or a group of pages. Nuxt documentation.pages
contains the application's views and routes. Nuxt reads all the *.vue
files inside this directory and creates the router of your application.plugins
contains Javascript plugins that are run before mounting the root Vue.js application. Nuxt documentation.static
is directly mapped to the server root and contains files that have to keep their names (e.g. robots.txt) or likely won't change (e.g. the favicon). Files in this folder are not processed by webpack.store
contains Vuex Store files. Nuxt documentation..editorconfig
..spec.ts
suffix added.
For example,
api
│ Resolver.ts
│ Resolver.spec.ts
feat
: Introduces a new feature or provides an enhancement of an existing featurefix
: Patches a bugrefactor
: A code change that neither fixes a bug nor adds a featuretest
: Adds missing tests or corrects existing testsdocs
: Documentation only changeschore
: Changes to the build process or auxiliary tools and libraries such as CI or package updatesThanks to Chromatic for providing the visual testing platform that helps us review UI changes and catch visual regressions.