The frontend of a starter project for the DV1677 JSRamverk course.

Overview

SSR-Editor is a real-time web application for creating and editing documents collaboratively. Built with React and WebSockets, it enables multiple users to write and edit documents simultaneously, with instant updates across all connected clients.

Frameworks & Libraries

• React
• Chakra UI
• Quill
• notistack
• Vite
• Axios
• Socket.io
• NPM

Getting Started

1. Install the necessary dependencies by running:

   npm install

2. Create the following .env files in the root of your project:

• .env:

  # BTH Config
  DEPLOY_USER=<your_acronym> # BTH's user acronym for deploying at BTH's server
  
  # Vite Config
  VITE_SEND_DELAY=750 # Send delay in milliseconds
  VITE_CLIENT_PORT=1337 # Client port

• .env.development:

  # Vite Config
  VITE_BACKEND_URL="http://localhost:1338"  # API URL for development
  VITE_BASENAME="" # Basename for Router
  VITE_HOMEPAGE_URL="" # Homepage URL
  VITE_DOMAIN_URL="http://localhost:5000" # Domain URL for frontend app
  
  # Frontend Config
  VITE_ENV_MODE="development"

• .env.production:

  VITE_BACKEND_URL="<your_backend_url>"  # API URL for production
  VITE_BASENAME="~<your_acronym>/editor" # Basename for Router
  VITE_HOMEPAGE_URL="https://www.student.bth.se/~<your_acronym>/editor/" # Homepage URL (BTH's server)
  VITE_DOMAIN_URL="https://www.student.bth.se/~<your_acronym>/editor/" # Domain URL for frontend app
  
  # Frontend Config
  VITE_ENV_MODE="production"

3. To launch the application in development mode, use:

   npm run dev

4. To create a production-ready build of the application, run:

   npm run build

5. To launch the application in production mode, use:

   npm run serve

6. To deploy the application to BTH's server, run:

   npm deploy

   Or:

   npm run build-and-deploy

7. To fix vulnerabilities in the application, run:

   npm audit

Testing

1. To run GUI tests:

   npm run test

Note

If you are on WSL, you might need to run npx expose-wsl@latest to expose the WSL port.