Config projet React / Flask, build par Webpack

6ffc0e87 · Bernard PRADINES · 09a6005c · 6ffc0e87 · 6ffc0e87 · 6ffc0e87
Commit 6ffc0e87 authored Dec 13, 2021 by Bernard PRADINES
--- a/.gitignore
+++ b/.gitignore
+__pycache__/*
+.venv/*
+.vscode/*
+node_modules/*
+yarn-error.log
--- a/babel.config.js
+++ b/babel.config.js
+module.exports = {
+    presets: [
+        "@babel/preset-env", 
+        "@babel/preset-react"
+    ],
+};
--- a/doc_tech/vizsources_doc_tech.odt
+++ b/doc_tech/vizsources_doc_tech.odt
--- a/package.json
+++ b/package.json
+{
+  "name": "vizsources",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "https://gitlab.huma-num.fr/portic/vizsources",
+  "author": "Bernard Pradines <bernard.pradines@univ-poitiers.fr>",
+  "license": "UNLICENSED",
+  "private": true,
+  "scripts": {
+    "dev": "webpack --mode development",
+    "watch": "webpack --mode development --watch",
+    "build": "webpack --mode production"
+  },
+  "dependencies": {
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.16.0",
+    "@babel/preset-env": "^7.16.4",
+    "@babel/preset-react": "^7.16.0",
+    "babel-loader": "^8.2.3",
+    "css-loader": "^6.5.1",
+    "file-loader": "^6.2.0",
+    "style-loader": "^3.3.1",
+    "webpack": "^5.65.0",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0"
+  }
+}
--- a/requirements.txt
+++ b/requirements.txt
+flask
--- a/static/dist/vizsources.bundle.js
+++ b/static/dist/vizsources.bundle.js
--- a/static/jsx/HelloWorld.jsx
+++ b/static/jsx/HelloWorld.jsx
+import React from 'react';
+
+export const HelloWorld = () => {
+  
+    function sayHello() {
+        alert('Hello, World!');
+    }
+  
+    return (
+        <button onClick={sayHello}>Cliquez-moi !</button>
+    )
+}
\ No newline at end of file
--- a/static/jsx/index.js
+++ b/static/jsx/index.js
+import React from "react";
+import ReactDOM from "react-dom";
+import { HelloWorld } from './HelloWorld';
+
+ReactDOM.render(<HelloWorld />, document.getElementById("render-react"));
--- a/templates/index.html
+++ b/templates/index.html
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Visualisation des sources de Portic</title>
+
+        <meta charset="utf-8" />
+        <meta http-equiv="Content-type" content="text/html; charset=utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+    </head>
+
+    <body>
+        <div id="render-react"></div>
+        <script type="text/javascript" src="{{ url_for('static', filename='dist/vizsources.bundle.js') }}"></script>
+    </body>
+</html>
--- a/vizsources.py
+++ b/vizsources.py
+from flask import Flask, render_template
+
+app = Flask(__name__)
+
+@app.route("/")
+def index():
+    return render_template("index.html")
+
+if __name__ == "__main__":
+    app.run(debug=True)
\ No newline at end of file
--- a/webpack.config.js
+++ b/webpack.config.js
+module.exports = {
+    entry: {
+        vizsources: "./static/jsx/index.js",
+    },
+    module: {
+        rules: [
+            {
+                test: /\.(js|jsx)$/,
+                use: "babel-loader",
+            },
+            {
+                test: /\.(svg|png|jpg|jpeg|gif)$/,
+                loader: "file-loader",
+
+                options: {
+                    name: "[name].[ext]",
+                    outputPath: "../../static/dist",
+                },
+            },
+            {
+                test: /\.css$/i,
+                use: ["style-loader", "css-loader"],
+            },
+        ],
+    },
+    resolve: {
+        extensions: ["", ".webpack.js", ".web.js", ".js", ".jsx", ".json"],
+    },
+    output: {
+        path: __dirname + "/static/dist",
+        filename: "[name].bundle.js",
+    },
+};
--- a/yarn.lock
+++ b/yarn.lock