essaye de faire foncitonner un bouton
This commit is contained in:
42
srcs/requirements/svelte/Dockerfile
Normal file
42
srcs/requirements/svelte/Dockerfile
Normal file
@@ -0,0 +1,42 @@
|
||||
FROM node:19-alpine AS development
|
||||
|
||||
WORKDIR /usr/src/app
|
||||
|
||||
COPY --chown=node:node ./api_front/package*.json ./
|
||||
|
||||
RUN npm ci
|
||||
|
||||
COPY --chown=node:node ./api_front/ ./
|
||||
|
||||
USER node
|
||||
|
||||
# FROM node:19-alpine AS build
|
||||
|
||||
# WORKDIR /usr/src/app
|
||||
|
||||
# COPY --chown=node:node ./api_front/package*.json ./
|
||||
|
||||
# COPY --chown=node:node --from=development /usr/src/app/node_modules ./node_modules
|
||||
|
||||
# COPY --chown=node:node ./api_front/ ./
|
||||
|
||||
# RUN npm run build
|
||||
|
||||
# ENV NODE_ENV production
|
||||
|
||||
# RUN npm ci --only=production && npm cache clean --force
|
||||
|
||||
# USER node
|
||||
|
||||
# FROM node:19-alpine AS production
|
||||
|
||||
# WORKDIR /usr/src/app
|
||||
|
||||
# COPY --chown=node:node --from=build /usr/src/app/node_modules ./node_modules
|
||||
# COPY --chown=node:node --from=build /usr/src/app/dist ./dist
|
||||
|
||||
# USER node
|
||||
|
||||
ENV HOST=0.0.0.0
|
||||
|
||||
CMD [ "node", "run", "dev"]
|
||||
4
srcs/requirements/svelte/api_front/.gitignore
vendored
Normal file
4
srcs/requirements/svelte/api_front/.gitignore
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
/node_modules/
|
||||
/public/build/
|
||||
|
||||
.DS_Store
|
||||
107
srcs/requirements/svelte/api_front/README.md
Normal file
107
srcs/requirements/svelte/api_front/README.md
Normal file
@@ -0,0 +1,107 @@
|
||||
# This repo is no longer maintained. Consider using `npm init vite` and selecting the `svelte` option or — if you want a full-fledged app framework and don't mind using pre-1.0 software — use [SvelteKit](https://kit.svelte.dev), the official application framework for Svelte.
|
||||
|
||||
---
|
||||
|
||||
# svelte app
|
||||
|
||||
This is a project template for [Svelte](https://svelte.dev) apps. It lives at https://github.com/sveltejs/template.
|
||||
|
||||
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
|
||||
|
||||
```bash
|
||||
npx degit sveltejs/template svelte-app
|
||||
cd svelte-app
|
||||
```
|
||||
|
||||
*Note that you will need to have [Node.js](https://nodejs.org) installed.*
|
||||
|
||||
|
||||
## Get started
|
||||
|
||||
Install the dependencies...
|
||||
|
||||
```bash
|
||||
cd svelte-app
|
||||
npm install
|
||||
```
|
||||
|
||||
...then start [Rollup](https://rollupjs.org):
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
```
|
||||
|
||||
Navigate to [localhost:8080](http://localhost:8080). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
|
||||
|
||||
By default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.
|
||||
|
||||
If you're using [Visual Studio Code](https://code.visualstudio.com/) we recommend installing the official extension [Svelte for VS Code](https://marketplace.visualstudio.com/items?itemName=svelte.svelte-vscode). If you are using other editors you may need to install a plugin in order to get syntax highlighting and intellisense.
|
||||
|
||||
## Building and running in production mode
|
||||
|
||||
To create an optimised version of the app:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
You can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).
|
||||
|
||||
|
||||
## Single-page app mode
|
||||
|
||||
By default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.
|
||||
|
||||
If you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `"start"` command in package.json:
|
||||
|
||||
```js
|
||||
"start": "sirv public --single"
|
||||
```
|
||||
|
||||
## Using TypeScript
|
||||
|
||||
This template comes with a script to set up a TypeScript development environment, you can run it immediately after cloning the template with:
|
||||
|
||||
```bash
|
||||
node scripts/setupTypeScript.js
|
||||
```
|
||||
|
||||
Or remove the script via:
|
||||
|
||||
```bash
|
||||
rm scripts/setupTypeScript.js
|
||||
```
|
||||
|
||||
If you want to use `baseUrl` or `path` aliases within your `tsconfig`, you need to set up `@rollup/plugin-alias` to tell Rollup to resolve the aliases. For more info, see [this StackOverflow question](https://stackoverflow.com/questions/63427935/setup-tsconfig-path-in-svelte).
|
||||
|
||||
## Deploying to the web
|
||||
|
||||
### With [Vercel](https://vercel.com)
|
||||
|
||||
Install `vercel` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g vercel
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
cd public
|
||||
vercel deploy --name my-project
|
||||
```
|
||||
|
||||
### With [surge](https://surge.sh/)
|
||||
|
||||
Install `surge` if you haven't already:
|
||||
|
||||
```bash
|
||||
npm install -g surge
|
||||
```
|
||||
|
||||
Then, from within your project folder:
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
surge public my-project.surge.sh
|
||||
```
|
||||
2918
srcs/requirements/svelte/api_front/package-lock.json
generated
Normal file
2918
srcs/requirements/svelte/api_front/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
srcs/requirements/svelte/api_front/package.json
Normal file
33
srcs/requirements/svelte/api_front/package.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "svelte-app",
|
||||
"version": "1.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "rollup -c",
|
||||
"dev": "rollup -c -w",
|
||||
"start": "sirv public --no-clear",
|
||||
"check": "svelte-check --tsconfig ./tsconfig.json"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@rollup/plugin-commonjs": "^17.0.0",
|
||||
"@rollup/plugin-node-resolve": "^11.0.0",
|
||||
"@rollup/plugin-typescript": "^8.0.0",
|
||||
"@tsconfig/svelte": "^2.0.0",
|
||||
"rollup": "^2.3.4",
|
||||
"rollup-plugin-css-only": "^3.1.0",
|
||||
"rollup-plugin-livereload": "^2.0.0",
|
||||
"rollup-plugin-svelte": "^7.0.0",
|
||||
"rollup-plugin-terser": "^7.0.0",
|
||||
"svelte": "^3.0.0",
|
||||
"svelte-check": "^2.0.0",
|
||||
"svelte-preprocess": "^4.0.0",
|
||||
"tslib": "^2.0.0",
|
||||
"typescript": "^4.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.1.3",
|
||||
"bootstrap": "^5.2.2",
|
||||
"sirv-cli": "^2.0.0",
|
||||
"svelte-spa-router": "^3.3.0"
|
||||
}
|
||||
}
|
||||
BIN
srcs/requirements/svelte/api_front/public/favicon.png
Normal file
BIN
srcs/requirements/svelte/api_front/public/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
4
srcs/requirements/svelte/api_front/public/global.css
Normal file
4
srcs/requirements/svelte/api_front/public/global.css
Normal file
@@ -0,0 +1,4 @@
|
||||
|
||||
html {
|
||||
height: -webkit-fill-available;
|
||||
}
|
||||
20
srcs/requirements/svelte/api_front/public/index.html
Normal file
20
srcs/requirements/svelte/api_front/public/index.html
Normal file
@@ -0,0 +1,20 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset='utf-8'>
|
||||
<meta name='viewport' content='width=device-width,initial-scale=1'>
|
||||
<!-- CSS only -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
|
||||
|
||||
<title>Svelte app</title>
|
||||
|
||||
<link rel='icon' type='image/png' href='/favicon.png'>
|
||||
<link rel='stylesheet' href='/global.css'>
|
||||
<link rel='stylesheet' href='/build/bundle.css'>
|
||||
|
||||
<script defer src='/build/bundle.js'></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
83
srcs/requirements/svelte/api_front/rollup.config.js
Normal file
83
srcs/requirements/svelte/api_front/rollup.config.js
Normal file
@@ -0,0 +1,83 @@
|
||||
import svelte from 'rollup-plugin-svelte';
|
||||
import commonjs from '@rollup/plugin-commonjs';
|
||||
import resolve from '@rollup/plugin-node-resolve';
|
||||
import livereload from 'rollup-plugin-livereload';
|
||||
import { terser } from 'rollup-plugin-terser';
|
||||
import sveltePreprocess from 'svelte-preprocess';
|
||||
import typescript from '@rollup/plugin-typescript';
|
||||
import css from 'rollup-plugin-css-only';
|
||||
|
||||
const production = !process.env.ROLLUP_WATCH;
|
||||
|
||||
function serve() {
|
||||
let server;
|
||||
|
||||
function toExit() {
|
||||
if (server) server.kill(0);
|
||||
}
|
||||
|
||||
return {
|
||||
writeBundle() {
|
||||
if (server) return;
|
||||
server = require('child_process').spawn('npm', ['run', 'start', '--', '--dev'], {
|
||||
stdio: ['ignore', 'inherit', 'inherit'],
|
||||
shell: true
|
||||
});
|
||||
|
||||
process.on('SIGTERM', toExit);
|
||||
process.on('exit', toExit);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export default {
|
||||
input: 'src/main.ts',
|
||||
output: {
|
||||
sourcemap: true,
|
||||
format: 'iife',
|
||||
name: 'app',
|
||||
file: 'public/build/bundle.js'
|
||||
},
|
||||
plugins: [
|
||||
svelte({
|
||||
preprocess: sveltePreprocess({ sourceMap: !production }),
|
||||
compilerOptions: {
|
||||
// enable run-time checks when not in production
|
||||
dev: !production
|
||||
}
|
||||
}),
|
||||
// we'll extract any component CSS out into
|
||||
// a separate file - better for performance
|
||||
css({ output: 'bundle.css' }),
|
||||
|
||||
// If you have external dependencies installed from
|
||||
// npm, you'll most likely need these plugins. In
|
||||
// some cases you'll need additional configuration -
|
||||
// consult the documentation for details:
|
||||
// https://github.com/rollup/plugins/tree/master/packages/commonjs
|
||||
resolve({
|
||||
browser: true,
|
||||
dedupe: ['svelte']
|
||||
}),
|
||||
commonjs(),
|
||||
typescript({
|
||||
sourceMap: !production,
|
||||
inlineSources: !production
|
||||
}),
|
||||
|
||||
// In dev mode, call `npm run start` once
|
||||
// the bundle has been generated
|
||||
!production && serve(),
|
||||
|
||||
// Watch the `public` directory and refresh the
|
||||
// browser on changes when not in production
|
||||
!production && livereload('public'),
|
||||
|
||||
// If we're building for production (npm run build
|
||||
// instead of npm run dev), minify
|
||||
production && terser()
|
||||
],
|
||||
watch: {
|
||||
clearScreen: false
|
||||
}
|
||||
};
|
||||
32
srcs/requirements/svelte/api_front/src/App.svelte
Normal file
32
srcs/requirements/svelte/api_front/src/App.svelte
Normal file
@@ -0,0 +1,32 @@
|
||||
<script>
|
||||
import Login from "./pages/auth/login.svelte";
|
||||
import Home from "./pages/home/home.svelte";
|
||||
import Router, {link} from 'svelte-spa-router';
|
||||
|
||||
const routes = {
|
||||
"/": Home,
|
||||
"/login": Login,
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<header class="p-3 text-bg-dark">
|
||||
<div class="container">
|
||||
<div
|
||||
class="d-flex flex-wrap align-items-center justify-content-center justify-content-lg-start">
|
||||
|
||||
<ul class="nav col-12 col-lg-auto me-lg-auto mb-2 justify-content-center mb-md-0">
|
||||
<li>
|
||||
<a href="/" type="button" class="btn btn-primary">Home</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="text-end">
|
||||
|
||||
<a href="/login" use:link type="button" class="btn btn-warning">Connexion</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<Router {routes} />
|
||||
1
srcs/requirements/svelte/api_front/src/global.d.ts
vendored
Normal file
1
srcs/requirements/svelte/api_front/src/global.d.ts
vendored
Normal file
@@ -0,0 +1 @@
|
||||
/// <reference types="svelte" />
|
||||
10
srcs/requirements/svelte/api_front/src/main.ts
Normal file
10
srcs/requirements/svelte/api_front/src/main.ts
Normal file
@@ -0,0 +1,10 @@
|
||||
import App from './App.svelte';
|
||||
|
||||
const app = new App({
|
||||
target: document.body,
|
||||
props: {
|
||||
name: 'world'
|
||||
}
|
||||
});
|
||||
|
||||
export default app;
|
||||
@@ -0,0 +1,40 @@
|
||||
<script lang="ts">
|
||||
import axios from 'axios';
|
||||
import {push} from 'svelte-spa-router';
|
||||
|
||||
$: submit = async() => {
|
||||
console.log("submit");
|
||||
const {data} = await axios.get('http://transcendance:8080/api/v2/auth',
|
||||
{
|
||||
withCredentials: true,
|
||||
}
|
||||
);
|
||||
if (data.status === "ok") {
|
||||
push('/');
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<body>
|
||||
<main class="form-signin w-100 m-auto">
|
||||
<button on:click={submit} class="w-100 btn btn-lg btn-primary" type="submit">
|
||||
Connexion avec prout
|
||||
</button>
|
||||
</main>
|
||||
</body>
|
||||
|
||||
<style>
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 40px;
|
||||
padding-bottom: 40px;
|
||||
}
|
||||
|
||||
.form-signin {
|
||||
max-width: 330px;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,79 @@
|
||||
<body>
|
||||
<main class="d-flex flex-nowrap">
|
||||
<h1 class="visually-hidden">Sidebars examples</h1>
|
||||
|
||||
<div class="d-flex flex-column flex-shrink-0 p-3 text-bg-dark" style="width: 280px;">
|
||||
<a href="/" class="d-flex align-items-center mb-3 mb-md-0 me-md-auto text-white text-decoration-none">
|
||||
<svg class="bi pe-none me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
|
||||
<span class="fs-4">Sidebar</span>
|
||||
</a>
|
||||
<hr>
|
||||
<ul class="nav nav-pills flex-column mb-auto">
|
||||
<li class="nav-item">
|
||||
<a href="#" class="nav-link active" aria-current="page">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#home"/></svg>
|
||||
Home
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#speedometer2"/></svg>
|
||||
Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#table"/></svg>
|
||||
Orders
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#grid"/></svg>
|
||||
Products
|
||||
</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#" class="nav-link text-white">
|
||||
<svg class="bi pe-none me-2" width="16" height="16"><use xlink:href="#people-circle"/></svg>
|
||||
Customers
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<hr>
|
||||
<div class="dropdown">
|
||||
<a href="#" class="d-flex align-items-center text-white text-decoration-none dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
|
||||
<strong>mdo</strong>
|
||||
</a>
|
||||
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
|
||||
<li><a class="dropdown-item" href="#">New Game</a></li>
|
||||
<li><a class="dropdown-item" href="#">Leaderboard</a></li>
|
||||
<li><a class="dropdown-item" href="#">Chat</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Profile</a></li>
|
||||
<li><hr class="dropdown-divider"></li>
|
||||
<li><a class="dropdown-item" href="#">Sign out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
<style>
|
||||
body {
|
||||
min-height: 100vh;
|
||||
min-height: -webkit-fill-available;
|
||||
}
|
||||
|
||||
|
||||
main {
|
||||
height: 100vh;
|
||||
height: -webkit-fill-available;
|
||||
max-height: 100vh;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
|
||||
.dropdown-toggle { outline: 0; }
|
||||
|
||||
</style>
|
||||
6
srcs/requirements/svelte/api_front/tsconfig.json
Normal file
6
srcs/requirements/svelte/api_front/tsconfig.json
Normal file
@@ -0,0 +1,6 @@
|
||||
{
|
||||
"extends": "@tsconfig/svelte/tsconfig.json",
|
||||
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules/*", "__sapper__/*", "public/*"]
|
||||
}
|
||||
Reference in New Issue
Block a user