README.md

Vue JS 3 + Typescript + Quasar 2 (SSR SPA mode) + Docker

Demo Link

Nuxt + Quasar version

Backend Rest Api

1 Java Springboot java-spring-boot-starter

Dashboard

Social feed

Chat layout

Charts

Gallery

Pdf view

Image corpper

Drag drop

Markdown editor

Carousel

Settings

Install the dependencies

pnpm install
# or
npm install

Config your Project at my-app/quasar.config.ts

devServer

   devServer: {
      open: false, // opens browser window automatically
      port: 9000,
    },

Start the app in development SPA mode (hot-code reloading, error reporting, etc.)

pnpm dev or
npm run dev or
quasar dev

Starting webserver at port 9000

Start the app in development SSR mode (hot-code reloading, error reporting, etc.)

pnpm dev:ssr or
npm run dev:ssr or
quasar dev -m ssr

Starting webserver at port 9100

Lint the files

pnpm lint
# or
npm run lint

Format the files

pnpm format
# or
npm run format

Build the SPA app for production

pnpm build or
npm run build or
quasar build

Build the SSR app for production

pnpm build:ssr or
npm run build:ssr or
quasar build -m ssr

Docker run

docker-compose build
docker-compose up -d

Deployment

Vercel Serverless (Default)

This starter template is pre-configured to deploy seamlessly on Vercel using SSR (Server-Side Rendering) mode with Serverless Functions.

How it works:

• The vercel.json file handles route rewrites and directs traffic to the serverless function.
• The api/index.js file acts as the entry point for Vercel's serverless environment.
• The package.json includes a postinstall script to ensure server dependencies are installed correctly during the Vercel build phase.

To deploy on Vercel:

1. Import your repository into Vercel.
2. In the project settings, set the Framework Preset to Other, Build Command to pnpm run build:ssr-vercel, Output Directory to dist/ssr/client.
3. Vercel will automatically detect the configuration and deploy your Quasar SSR app.

---

Deploying to Other Platforms

If you prefer to deploy this application to a different environment (e.g., standard Node.js server, Docker, AWS, or DigitalOcean), you must remove the Vercel-specific configurations to prevent conflicts.

Follow these steps to revert to the standard Quasar SSR setup:

1. Delete Vercel files: Remove the vercel.json file and the entire api directory from the root of your project.

2. Update quasar.config.js: Locate the ssr configuration block and remove the prodScriptNamedExport property:

   ssr: {
     // Remove or comment out the following line:
     // prodScriptNamedExport: 'default',
     
     pwa: false,
     // ...
   }

3. Update src-ssr/server.ts:

export const listen = defineSsrListen(
  async ({ app, devHttpsOptions, port }) => {

    // Remove this block entirely
    // if (import.meta.env.QUASAR_PROD) {
    //   return { default: app };
    // }

    // Keep the rest of the default listening logic...
  }
);

3. Update src-ssr/server.ts: Revert the SsrDriver interface declaration at the top of the file back to its default state:

declare module '#q-app' {
  interface SsrDriver {
    app: Application;
    listenResult: Server; // Remove the " | { default: Application }" part
    request: Request;
    response: Response;
  }
}

Once these changes are made, your project will run as a standard long-running Node.js process when built for production (quasar build -m ssr), ready to be deployed anywhere.

Customize the configuration

See Configuring quasar.config.ts.