SciNote Electronic Lab Notebook (ELN)

When the server returns an error (distinct from standard input validation errors, such as unexpected system failures), follow these UI patterns:

1. Within a Form: Display the error as general form error feedback within the form's UI.
2. Outside a Form: Display the error using a flash message.
   • Important: If the error occurs inside a modal window, you MUST close the modal before showing the flash message to ensure the user actually sees it.

The bin/setup script automates the installation of dependencies and the preparation of the development environment. It is designed to be idempotent, meaning it can be run multiple times to ensure the environment is in the expected state without causing errors.

./bin/setup

When executed, bin/setup performs the following sequence of operations:

1. Dependency Installation: Installs bundler (using --conservative) and runs bundle install if dependencies are not already satisfied.
2. Database Preparation: Runs bin/rails db:prepare to set up the database schema.
3. Cleanup: Clears old logs and temporary files using bin/rails log:clear tmp:clear.
4. Server Restart: Restarts the application server using bin/rails restart.

The project uses the ESLint Flat Config format (eslint.config.mjs). The configuration includes support for Vue files, Airbnb style guidelines, and specific global variables.

Key configuration details:

• Global Ignores: node_modules, ./app/assets/builds/**, and ./public/ are excluded from linting.
• Supported Environments: Browser, Node.js, and ES6 globals are enabled.
• Custom Globals: jquery and _ (underscore) are explicitly defined as global variables.
• Vue Support: Uses vue-eslint-parser for .vue files.
• Style Guidelines: Extends airbnb and plugin:vue/base via FlatCompat.

import { defineConfig, globalIgnores } from 'eslint/config';

export default defineConfig([
  globalIgnores(['node_modules', './app/assets/builds/**', './public/']),
  // ... other configurations
]);

The db service uses the postgres:18 image. You can configure the database credentials using the following environment variables:

• POSTGRES_USER: The username for the database (defaults to postgres).
• POSTGRES_PASSWORD: The password for the database (defaults to mysecretpassword).

Data is persisted in the scinote_development_postgres volume at /var/lib/postgresql/18/docker inside the container.

services:
  db:
    image: postgres:18
    environment:
      - "POSTGRES_USER=postgres"
      - "POSTGRES_PASSWORD=mysecretpassword"
    volumes:
      - scinote_development_postgres:/var/lib/postgresql/18/docker

The web service runs the Rails application. It is configured with the following settings:

• Port Mapping: Maps host port 3000 to container port 3000.
• Environment: Sets RAILS_ENV=development.
• Startup Command: Automatically removes existing server PIDs, checks/installs Ruby gems via bundle, and starts the Rails server on 0.0.0.0.
• Volumes:
  • Mounts the current directory to /usr/src/app for live code reloading.
  • Uses scinote_development_bundler for Ruby gems.
  • Uses scinote_development_storage for application storage.

services:
  web:
    ports:
      - "3000:3000"
    environment:
      - RAILS_ENV=development
    command: >
      bash -c "rm -f /usr/src/app/tmp/pids/server.pid &&
               (bundle check || bundle install) &&
               bundle exec rails s -b 0.0.0.0"

SciNote uses several specialized services to handle frontend asset compilation in development mode:

Webpack

Runs yarn install and yarn build --watch to compile JavaScript assets. Sets NODE_ENV=development.

CSS Bundling

Runs yarn build:css --watch to compile CSS assets. Sets NODE_ENV=development.

Tailwind

Runs rails tailwindcss:watch to monitor and compile Tailwind CSS classes. Sets both RAILS_ENV=development and NODE_ENV=development.

services:
  webpack:
    command: >
      bash -c "yarn install && yarn build --watch"
    environment:
      - NODE_ENV=development

  css_bundling:
    command: >
      bash -c "yarn build:css --watch"
    environment:
      - NODE_ENV=development

  tailwind:
    command: >
      bash -c "rails tailwindcss:watch"
    environment:
      - RAILS_ENV=development
      - NODE_ENV=development

The following custom rules and settings are applied in the SciNote Web ESLint configuration:

rules: {
  'import/extensions': 'off',
  'import/no-unresolved': 'off',
  'spaced-comment': [
    'error',
    'always',
    {
      markers: ['=']
    }
  ],
  'lines-around-comment': [
    'warn',
    {
      beforeLineComment: false
    }
  ],
  'max-len': [
    'error',
    {
      code: 180
    }
  ],
  'vue/max-len': [
    'error',
    {
      code: 180,
      template: 240,
      tabWidth: 2
    }
  ],
  'comma-dangle': ['error', 'never'],
  'vue/no-v-html': 'warn'
}