Can Laragon Host Single Page APP e.g Next.js, Vuejs, Reactjs e.tc

[Uzorvicky]

Good Morning Team, Please can someone kindly guide me on how to host a Single Page App build Like .next folder for nextjs or build folder for Reactjs.

[laravellously]

Yes. Easily even.

1. Make sure to "Start All"
2. Click "Quick App" -> "Blank app" and give it a name
3. Click "Explore" -> [Your blank app]
4. Create a new nextjs app or Copy an existing app
5. Point laragon to the build folder.

[Uzorvicky]

Okay, Thanks. it can only work for production not good for Development! What about the node backend Api's?.

[Pen-y-Fan]

See How to develop a Node.js app with Laragon ?

[Uzorvicky]

Am still having trouble with this, can you show a live example

[improved-software]

Use localhost for development

1. Create your project folder in the Laragon 'www' folder.

   • creates a virtual host - E.g. https://spa.local

2. Change the build directory to 'public'

   • can access your SPA at https://spa.local

3. Update your build process to use the virtual host URL (plus SSL certificates if you want to access it using HTTPS)

   • Simplest way - make npm run dev, yarn dev etc use 'localhost'
     changing http://localhost:3000 to http://spa.local:3000 works (try it)

ℹ Laragon runs on localhost - pretty urls too

---

I use Vite/SvelteKit, pass the SSL certificates and HTTPS works too.
Local dev works similar to a production site and authenticates securely for API requests etc 😎

vite.config.js - to use https://spa.local:5173

import { sveltekit } from '@sveltejs/kit/vite'
import { defineConfig } from 'vitest/config'
import fs from 'fs'

export default defineConfig({
  plugins: [sveltekit()],

  server: {
    host: 'spa.local',
    hmr: {
      host: 'localhost',
    },
    watch: {
      usePolling: true,
    },
    https: {
      key: fs.readFileSync('C:/laragon/etc/ssl/laragon.key'),
      cert: fs.readFileSync('C:/laragon/etc/ssl/laragon.crt'),
    },
  },
  test: {
    include: ['src/**/*.{test,spec}.{js,ts}'],
  },
})