diff --git a/svelte-simple/.gitignore b/svelte-simple/.gitignore new file mode 100644 index 0000000..a547bf3 --- /dev/null +++ b/svelte-simple/.gitignore @@ -0,0 +1,24 @@ +# Logs +logs +*.log +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* +lerna-debug.log* + +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/svelte-simple/.vscode/extensions.json b/svelte-simple/.vscode/extensions.json new file mode 100644 index 0000000..bdef820 --- /dev/null +++ b/svelte-simple/.vscode/extensions.json @@ -0,0 +1,3 @@ +{ + "recommendations": ["svelte.svelte-vscode"] +} diff --git a/svelte-simple/README.md b/svelte-simple/README.md new file mode 100644 index 0000000..14dec3b --- /dev/null +++ b/svelte-simple/README.md @@ -0,0 +1,26 @@ +# Svelte Example + +This repository contains an example of Svelte application that is deployed on Dokploy. + + +1. **Use Git Provider in Your Application**: + - Repository: `https://github.com/Dokploy/examples.git` + - Branch: `main` + - Build path: `/svelte-simple` + +2. **Add Environment Variables**: +- Navigate to the "Environments" tab and add the following variable: + ```plaintext + NIXPACKS_START_CMD="pnpm run preview" + ``` + +3. **Click on Deploy**: + - Deploy your application by clicking the deploy button. + +4. **Generate a Domain**: + - Click on generate domain button. + - A new domain will be generated for you. + - You can use this domain to access your application. + + +If you need further assistance, join our [Discord server](https://discord.com/invite/2tBnJ3jDJc). diff --git a/svelte-simple/index.html b/svelte-simple/index.html new file mode 100644 index 0000000..b6c5f0a --- /dev/null +++ b/svelte-simple/index.html @@ -0,0 +1,13 @@ + + + + + + + Vite + Svelte + TS + + +
+ + + diff --git a/svelte-simple/package.json b/svelte-simple/package.json new file mode 100644 index 0000000..096441f --- /dev/null +++ b/svelte-simple/package.json @@ -0,0 +1,21 @@ +{ + "name": "svelte-simple", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json" + }, + "devDependencies": { + "@sveltejs/vite-plugin-svelte": "^3.1.1", + "@tsconfig/svelte": "^5.0.4", + "svelte": "^4.2.18", + "svelte-check": "^3.8.1", + "tslib": "^2.6.3", + "typescript": "^5.2.2", + "vite": "^5.3.1" + } +} diff --git a/svelte-simple/public/vite.svg b/svelte-simple/public/vite.svg new file mode 100644 index 0000000..e7b8dfb --- /dev/null +++ b/svelte-simple/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svelte-simple/src/App.svelte b/svelte-simple/src/App.svelte new file mode 100644 index 0000000..e8b590f --- /dev/null +++ b/svelte-simple/src/App.svelte @@ -0,0 +1,47 @@ + + +
+
+ + + + + + +
+

Vite + Svelte

+ +
+ +
+ +

+ Check out SvelteKit, the official Svelte app framework powered by Vite! +

+ +

+ Click on the Vite and Svelte logos to learn more +

+
+ + diff --git a/svelte-simple/src/app.css b/svelte-simple/src/app.css new file mode 100644 index 0000000..617f5e9 --- /dev/null +++ b/svelte-simple/src/app.css @@ -0,0 +1,79 @@ +:root { + font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; + line-height: 1.5; + font-weight: 400; + + color-scheme: light dark; + color: rgba(255, 255, 255, 0.87); + background-color: #242424; + + font-synthesis: none; + text-rendering: optimizeLegibility; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +a { + font-weight: 500; + color: #646cff; + text-decoration: inherit; +} +a:hover { + color: #535bf2; +} + +body { + margin: 0; + display: flex; + place-items: center; + min-width: 320px; + min-height: 100vh; +} + +h1 { + font-size: 3.2em; + line-height: 1.1; +} + +.card { + padding: 2em; +} + +#app { + max-width: 1280px; + margin: 0 auto; + padding: 2rem; + text-align: center; +} + +button { + border-radius: 8px; + border: 1px solid transparent; + padding: 0.6em 1.2em; + font-size: 1em; + font-weight: 500; + font-family: inherit; + background-color: #1a1a1a; + cursor: pointer; + transition: border-color 0.25s; +} +button:hover { + border-color: #646cff; +} +button:focus, +button:focus-visible { + outline: 4px auto -webkit-focus-ring-color; +} + +@media (prefers-color-scheme: light) { + :root { + color: #213547; + background-color: #ffffff; + } + a:hover { + color: #747bff; + } + button { + background-color: #f9f9f9; + } +} diff --git a/svelte-simple/src/assets/svelte.svg b/svelte-simple/src/assets/svelte.svg new file mode 100644 index 0000000..c5e0848 --- /dev/null +++ b/svelte-simple/src/assets/svelte.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/svelte-simple/src/lib/Counter.svelte b/svelte-simple/src/lib/Counter.svelte new file mode 100644 index 0000000..979b4df --- /dev/null +++ b/svelte-simple/src/lib/Counter.svelte @@ -0,0 +1,10 @@ + + + diff --git a/svelte-simple/src/main.ts b/svelte-simple/src/main.ts new file mode 100644 index 0000000..4d67e2a --- /dev/null +++ b/svelte-simple/src/main.ts @@ -0,0 +1,8 @@ +import './app.css' +import App from './App.svelte' + +const app = new App({ + target: document.getElementById('app')!, +}) + +export default app diff --git a/svelte-simple/src/vite-env.d.ts b/svelte-simple/src/vite-env.d.ts new file mode 100644 index 0000000..4078e74 --- /dev/null +++ b/svelte-simple/src/vite-env.d.ts @@ -0,0 +1,2 @@ +/// +/// diff --git a/svelte-simple/svelte.config.js b/svelte-simple/svelte.config.js new file mode 100644 index 0000000..b0683fd --- /dev/null +++ b/svelte-simple/svelte.config.js @@ -0,0 +1,7 @@ +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' + +export default { + // Consult https://svelte.dev/docs#compile-time-svelte-preprocess + // for more information about preprocessors + preprocess: vitePreprocess(), +} diff --git a/svelte-simple/tsconfig.json b/svelte-simple/tsconfig.json new file mode 100644 index 0000000..df56300 --- /dev/null +++ b/svelte-simple/tsconfig.json @@ -0,0 +1,21 @@ +{ + "extends": "@tsconfig/svelte/tsconfig.json", + "compilerOptions": { + "target": "ESNext", + "useDefineForClassFields": true, + "module": "ESNext", + "resolveJsonModule": true, + /** + * Typecheck JS in `.svelte` and `.js` files by default. + * Disable checkJs if you'd like to use dynamic types in JS. + * Note that setting allowJs false does not prevent the use + * of JS in `.svelte` files. + */ + "allowJs": true, + "checkJs": true, + "isolatedModules": true, + "moduleDetection": "force" + }, + "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], + "references": [{ "path": "./tsconfig.node.json" }] +} diff --git a/svelte-simple/tsconfig.node.json b/svelte-simple/tsconfig.node.json new file mode 100644 index 0000000..6c2d870 --- /dev/null +++ b/svelte-simple/tsconfig.node.json @@ -0,0 +1,12 @@ +{ + "compilerOptions": { + "composite": true, + "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", + "skipLibCheck": true, + "module": "ESNext", + "moduleResolution": "bundler", + "strict": true, + "noEmit": true + }, + "include": ["vite.config.ts"] +} diff --git a/svelte-simple/vite.config.ts b/svelte-simple/vite.config.ts new file mode 100644 index 0000000..a2b73d8 --- /dev/null +++ b/svelte-simple/vite.config.ts @@ -0,0 +1,11 @@ +import { defineConfig } from "vite"; +import { svelte } from "@sveltejs/vite-plugin-svelte"; + +// https://vitejs.dev/config/ +export default defineConfig({ + plugins: [svelte()], + preview: { + port: 3000, + host: true, + }, +});