Replace React scripts with ViteJS [CI SKIP]

pull/2/head
Clément FRÉVILLE 2 years ago
parent b8929fb765
commit 8479696682

@ -0,0 +1,17 @@
module.exports = {
plugins: [
'react',
'react-hooks'
],
extends: [
'eslint:recommended',
'plugin:react/recommended',
'plugin:react/jsx-runtime',
'plugin:react-hooks/recommended'
],
settings: {
react: {
version: 'detect'
}
}
};

@ -5,5 +5,17 @@
* Les administrateurs (coachs) d'une equipe peuvent diffuser leurs tactiques à leurs élèves.
* Les élèves peuvent aussi proposer leurs propres tactiques que les coachs peuvent à leurs tour approuver.
## Construire l'application
Ce projet utilise NPM comme gestionnaire de paquets, mais vous pouvez remplacer NPM par Yarn ou PNPM.
Une fois le dépôt cloné :
```bash
npm install # Installe les dépendances
npm run build # Construit l'application
npm run dev # Démarre le serveur de développement
```
## Contribuer
Dans le code ou dans la documentation, merci d'ecrire en anglais si possible

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Tactique basket</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="module" src="/src/index.js"></script>
</body>
</html>

@ -10,44 +10,22 @@
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@vitejs/plugin-react": "^3.1.0",
"eslint": "^8.35.0",
"eslint-plugin-react": "^7.32.2",
"eslint-plugin-react-hooks": "^4.6.0",
"ionicons": "^6.1.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-native-ionicons": "^4.6.5",
"react-router-dom": "^6.8.1",
"react-scripts": "^5.0.1",
"vite": "^4.1.4",
"vitest": "^0.29.2",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start --openssl-legacy-provider",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"dev": "concurrently -k \"BROWSER=none npm start\" \"npm:electron\"",
"electron": "wait-on tcp:3000 && electron ."
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"concurrently": "^7.6.0",
"electron": "^23.0.0",
"electron-is-dev": "^2.0.0",
"wait-on": "^7.0.1"
"build": "vite build",
"test": "vitest",
"dev": "vite"
}
}

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Before

Width:  |  Height:  |  Size: 568 KiB

After

Width:  |  Height:  |  Size: 568 KiB

Before

Width:  |  Height:  |  Size: 1.3 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

@ -1,43 +0,0 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
Notice the use of %PUBLIC_URL% in the tags above.
It will be replaced with the URL of the `public` folder during the build.
Only files inside the `public` folder can be referenced from the HTML.
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
</head>
<body style="display: block">
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root" style="width: 100%; height: 100%"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>

@ -29,27 +29,27 @@
<div id="teams-list">
<!-- afficher la liste des équipes -->
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="/img/logo2.png">
<p class="team-name">Equipe 1</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 2</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 3</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 3</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 3</p>
</div>
<div class="team-item">
<img src="../src/img/logo2.png">
<img src="img/logo2.png">
<p class="team-name">Equipe 3</p>
</div>
</div>

@ -39,7 +39,7 @@ export default function Login() {
</div>
</div>
<div className={"Href"}>
<a href="src/components/login#">J'ai oublier mon mot de passe</a>
<a href="/login">J'ai oublier mon mot de passe</a>
<a href="/register">Je n'ai pas encore de compte</a>
</div>

@ -1,11 +1,16 @@
import React from 'react'
import React, {useEffect, useState} from 'react'
import '../../css/main.css'
export function MainPage() {
let n = 5;
useEffect(() => {
n++;
}, []);
return (<>
<header>
<div className="header-left">
<img src={require("../../img/logo2.png")}/>
<img src="/img/logo2.png" alt="" />
</div>
<div className="header-center">
<h2>Bienvenue, Prénom Nom</h2>
@ -21,27 +26,27 @@ export function MainPage() {
<div id="teams-list">
{/*afficher la liste des équipes*/}
<div className="team-item">
<img src={require("../../img/logo2.png")}/>
<img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 1</p>
</div>
<div className="team-item">
<img src={require("../../img/logo2.png")}/>
<img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 2</p>
</div>
<div className="team-item">
<img src={require("../../img/logo2.png")}/>
<img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 3</p>
</div>
<div className="team-item">
<img src={require("../../img/logo2.png")}/>
<img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 3</p>
</div>
<div className="team-item">
<img src={require("../../img/logo2.png")}/>
<img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 3</p>
</div>
<div className="team-item">
<img src={require("../../img/logo2.png")}/>
<img src="/img/logo2.png" alt="" />
<p className="team-name">Equipe 3</p>
</div>
</div>
@ -53,19 +58,19 @@ export function MainPage() {
<div id="schemas-list">
{/*afficher la liste des Schémas*/}
<div className="schemas-item">
<img src={require("../../img/Visualiseur.png")}/>
<img src="/img/Visualiseur.png" alt="" />
<p className="schemas-name">Schéma 1</p>
</div>
<div className="schemas-item">
<img src={require("../../img/Visualiseur.png")}/>
<img src="/img/Visualiseur.png" alt="" />
<p className="schemas-name">Schéma 2</p>
</div>
<div className="schemas-item">
<img src={require("../../img/Visualiseur.png")}/>
<img src="/img/Visualiseur.png" alt="" />
<p className="schemas-name">Schéma 3</p>
</div>
<div className="schemas-item">
<img src={require("../../img/Visualiseur.png")}/>
<img src="/img/Visualiseur.png" alt="" />
<p className="schemas-name">Schéma 3</p>
</div>
</div>

@ -39,7 +39,7 @@ body {
/* Portrait layout (default) */
.app {
background:url(../img/logo.png) no-repeat center top; /* 170px x 200px */
background:url(../../public/img/logo.png) no-repeat center top; /* 170px x 200px */
position:absolute; /* position in the center of the screen */
left:50%;
top:50%;

@ -13,7 +13,7 @@ a{
justify-content: center;
align-items: center;
min-height: 100vh;
background-image: url("../img/background-login.jpg");
background-image: url("/img/background-login.jpg");
-webkit-backdrop-filter: blur(15px); /* assure la compatibilité avec safari */
backdrop-filter: blur(35px);
background-color: rgba(182, 182, 182, 0.2);

@ -0,0 +1,37 @@
import react from '@vitejs/plugin-react';
import { defineConfig } from 'vitest/config';
import fs from 'fs/promises';
// https://vitejs.dev/config/
export default defineConfig({
esbuild: {
loader: "jsx",
include: /src\/.*\.jsx?$/,
exclude: [],
},
build: {
target: 'es2021',
},
test: {
globals: true,
environment: 'jsdom',
},
plugins: [react({
loader: { '.js': 'jsx' },
})],
optimizeDeps: {
esbuildOptions: {
plugins: [
{
name: "load-js-files-as-jsx",
setup(build) {
build.onLoad({ filter: /src\/.*\.js$/ }, async (args) => ({
loader: "jsx",
contents: await fs.readFile(args.path, "utf8"),
}));
},
},
],
},
},
});