How to replace React with Svelte in offical SAAS example application

[alokmahor]

I am trying Loco web framework.

I installed Loco and created a offical SAAS app using steps given at https://loco.rs/docs/getting-started/tour/

Details of that example minimal SAAS app is given at https://loco.rs/docs/starters/saas/

Application structure is

tree -L 3 --gitignore
.
├── assets
│   ├── i18n
│   │   ├── de-DE
│   │   ├── en-US
│   │   └── shared.ftl
│   ├── static
│   │   ├── 404.html
│   │   └── image.png
│   └── views
│       └── home
├── Cargo.toml
├── config
│   ├── development.yaml
│   ├── production.yaml
│   └── test.yaml
├── db.sqlite
├── examples
│   └── playground.rs
├── frontend
│   ├── dist
│   │   ├── assets
│   │   └── index.html
│   ├── favicon.ico
│   ├── index.html
│   ├── package.json
│   ├── pnpm-lock.yaml
│   ├── README.md
│   ├── src
│   │   ├── index.css
│   │   └── main.jsx
│   └── vite.config.js
├── migration
│   ├── Cargo.toml
│   ├── README.md
│   └── src
│       ├── lib.rs
│       ├── m20220101_000001_users.rs
│       ├── m20231103_114510_notes.rs
│       └── main.rs
├── README.md
├── src
│   ├── app.rs
│   ├── bin
│   │   └── main.rs
│   ├── controllers
│   │   ├── auth.rs
│   │   ├── mod.rs
│   │   ├── notes.rs
│   │   └── user.rs
│   ├── fixtures
│   │   ├── notes.yaml
│   │   └── users.yaml
│   ├── initializers
│   │   ├── mod.rs
│   │   └── view_engine.rs
│   ├── lib.rs
│   ├── mailers
│   │   ├── auth
│   │   ├── auth.rs
│   │   └── mod.rs
│   ├── models
│   │   ├── _entities
│   │   ├── mod.rs
│   │   ├── notes.rs
│   │   └── users.rs
│   ├── tasks
│   │   ├── mod.rs
│   │   └── seed.rs
│   ├── views
│   │   ├── auth.rs
│   │   ├── mod.rs
│   │   └── user.rs
│   └── workers
│       ├── downloader.rs
│       └── mod.rs
└── tests
    ├── models
    │   ├── mod.rs
    │   ├── snapshots
    │   └── users.rs
    ├── mod.rs
    ├── requests
    │   ├── auth.rs
    │   ├── mod.rs
    │   ├── notes.rs
    │   ├── prepare_data.rs
    │   ├── snapshots
    │   └── user.rs
    └── tasks
        ├── mod.rs
        └── seed.rs

34 directories, 58 files

frontend/package.json is

{
  "name": "frontend",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.43",
    "@types/react-dom": "^18.2.17",
    "@vitejs/plugin-react": "^4.2.1",
    "vite": "^5.0.8"
  }
}

frontend/vite.config.js is

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000",
        changeOrigin: true,
        secure: false,
      },
    },
  },
})

So this sample SAAS application comes with React already setup. Instead of react I want to use Svelte. How can I replace React with Svelte in this project?

[kaplanelad]

You can replace the frontend with and code/framework you want to.
There is not something special to Loco in the frontend folder.

[alokmahor]

can it be possible to disable frontend and use only template system?

[kaplanelad]

what do you mean?

[LimpidCrypto]

I've written a small blog post on how to set up an Angular frontend. It would be pretty much the same. Just replace with the following:

Step 1

• leave out the Angular CLI installation

Step 5

• use the Svelte setup

Step 6

• build your Svelte frontend

Step 7

• replace the loco configuration paths as you need

[kaplanelad]

@alokmahor This is the blog that @LimpidCrypto wrote: https://loco.rs/blog/angular-frontend/