Skip to content

GitLab

Commit d455016d authored by Florent Chehab's avatar Florent Chehab
Browse files

Merge branch 'front_dev_hot_reloading' into 'master' 

Hot Module replacement added for frontend developement

See merge request !45
parents 04c716cf 43dfe4bc
Pipeline #34849 passed with stages
in 3 minutes and 7 seconds
Expand all Hide whitespace changes
Inline Side-by-side
backend/base_app/settings/base.py
View file @ d455016d
......@@ -18,8 +18,27 @@ import sys
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = dirname(dirname(dirname(os.path.abspath(__file__))))
# Application definition
##########
# Webpack loader related
WEBPACK_LOADER = {
"DEFAULT": {
"BUNDLE_DIR_NAME": "frontend_app/bundles/",
"STATS_FILE": os.path.join(BASE_DIR, "../frontend/webpack-stats.json"),
}
}
STATICFILES_DIRS = (
os.path.join(
BASE_DIR, "static/frontend_app/bundles/"
), # We do this so that django's collectstatic copies or our bundles to the STATIC_ROOT or syncs them to whatever storage we use.
)
# End of webpack loader related
###########
# Application definition
INSTALLED_APPS = [
"django.contrib.admin",
"django.contrib.auth",
......@@ -34,6 +53,7 @@ INSTALLED_APPS = [
"rest_framework.authtoken",
"backend_app",
"frontend_app",
"webpack_loader",
]
MIDDLEWARE = [
......
backend/frontend_app/templates/frontend_app/index.html
View file @ d455016d
{% load render_bundle from webpack_loader %}
<!DOCTYPE html>
<html style="font-size:14">
......@@ -20,9 +21,12 @@
<!-- <script src="{% static '/frontend_app/react-dist/react.production.min.js' %}"></script> -->
<link rel="stylesheet" href="{% static '/frontend_app/leaflet-dist/leaflet.css' %}"/>
<link rel="stylesheet" href="{% static '/frontend_app/custom_leaflet.css' %}"/>
<link rel="stylesheet" href="{% static '/frontend_app/main.css' %}"/>
<!-- <link rel="stylesheet" href="{% static '/frontend_app/main.css' %}"/> -->
<!-- <script src="{% static '/frontend_app/leaflet-dist/leaflet.js' %}"></script> -->
<!-- <script src="{% static '/frontend_app/react-leaflet-dist/react-leaflet.js' %}"></script> -->
<script src="{% static '/frontend_app/main.js' %}"></script>
<noscript>Cette application nécessite Javascript... Merci de l'activer ou d'utiliser un navigateur approprié.</noscript>
</html>
\ No newline at end of file
<!-- <script src="{% static '/frontend_app/main.js' %}"></script> -->
{% render_bundle 'main' %}
{% render_bundle 'vendor' %}
<noscript>Cette application nécessite Javascript... Merci de l'activer ou d'utiliser un navigateur approprié.</noscript>
</html>
backend/requirements.txt
View file @ d455016d
......@@ -17,3 +17,4 @@ pyyaml
git+https://github.com/FloChehab/django-extensions.git@30c1a807aeb985739358d70907496e98d1857abb#egg=django-extensions
uwsgi
dotmap
django-webpack-loader==0.6.0
\ No newline at end of file
frontend/.babelrc
View file @ d455016d
......@@ -6,6 +6,7 @@
"stage-1"
],
"plugins": [
"transform-class-properties"
"transform-class-properties",
"react-hot-loader/babel"
]
}
\ No newline at end of file
frontend/.gitignore
View file @ d455016d
node_modules
\ No newline at end of file
node_modules
webpack-stats.json
\ No newline at end of file
frontend/dist/.gitignore
View file @ d455016d
main.js
main.css
fonts/
stats.json
\ No newline at end of file
stats.json
bundles
\ No newline at end of file
frontend/package-lock.json
View file @ d455016d
This diff is collapsed.
frontend/package.json
View file @ d455016d
......@@ -6,15 +6,15 @@
"scripts": {
"lint": "eslint \"./src/**/*.js\"",
"lint-fix": "eslint \"./src/**/*.js\" --fix",
"dev": "webpack --mode development",
"build": "webpack --mode production",
"dev": "node server.js",
"build": "webpack --config webpack.config.build.js",
"test": "echo \"Error: no test specified\" && exit 1",
"stats": "webpack --profile --json > frontend/static/frontend/stats.json",
"view-stats": "webpack-bundle-analyzer frontend/static/frontend/stats.json"
},
"repository": {
"type": "git",
"url": "git@gitlab.utc.fr:chehabfl/outgoing_rex.git"
"url": "git@gitlab.utc.fr:rex-dri/rex-dri.git"
},
"author": "",
"license": "ISC",
......@@ -22,7 +22,6 @@
"@material-ui/core": "^3.1.0",
"@material-ui/icons": "^2.0.3",
"@material-ui/lab": "^3.0.0-alpha.16",
"babel-polyfill": "^6.26.0",
"babel-preset-stage-0": "^6.24.1",
"date-fns": "^2.0.0-alpha.16",
"downshift": "^2.2.0",
......@@ -50,6 +49,7 @@
"babel-eslint": "^10.0.1",
"babel-loader": "^7.1.5",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
......@@ -64,11 +64,15 @@
"node-sass": "^4.9.3",
"postcss-loader": "^3.0.0",
"prop-types": "^15.6.2",
"react-hot-loader": "^4.6.5",
"react-lorem-component": "^0.13.0",
"react-script": "^2.0.5",
"sass-loader": "^7.1.0",
"webpack": "^4.17.0",
"webpack-bundle-analyzer": "^3.0.2",
"webpack-cli": "^3.1.0"
"webpack-bundle-tracker": "^0.4.2-beta",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.14",
"webpack-merge": "^4.2.1"
}
}
frontend/server.js 0 → 100644
View file @ d455016d
var webpack = require("webpack");
var WebpackDevServer = require("webpack-dev-server");
var config = require("./webpack.config.dev");
new WebpackDevServer(webpack(config), {
publicPath: config.output.publicPath,
hot: true,
inline: true,
//progress: true,
historyApiFallback: true,
headers: { "Access-Control-Allow-Origin": "*" }
}).listen(3000, "0.0.0.0", (err) => {
if (err) {
// eslint-disable-next-line no-console
console.log(err);
}
// eslint-disable-next-line no-console
console.log("Listening at 0.0.0.0:3000");
});
frontend/src/index.js
View file @ d455016d
import "babel-polyfill";
import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
......@@ -19,7 +17,12 @@ const MainReactEntry = () => (
</Provider>
);
const wrapper = document.getElementById("app");
wrapper ? ReactDOM.render(<MainReactEntry />, wrapper) : null;
// eslint-disable-next-line no-undef
if (module.hot) {
// eslint-disable-next-line no-undef
module.hot.accept();
}
frontend/webpack.config.js → frontend/webpack.config.base.js
View file @ d455016d
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const BundleTracker = require("webpack-bundle-tracker");
const config = {
entry: {
main: "./src/index.js",
main: [
"./src/index",
],
vendor: [
"babel-polyfill",
]
},
output: {
path: __dirname + "/dist",
filename: "[name].js"
path: __dirname + "/dist/bundles",
filename: "[name]-[hash].js"
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
loader: "babel-loader",
options: {
presets: ['es2015', 'react', 'stage-0'],
presets: ["es2015", "react", "stage-0"],
compact: true
},
},
{
......@@ -26,26 +33,26 @@ const config = {
options: {
// you can specify a publicPath here
// by default it use publicPath in webpackOptions.output
publicPath: '../'
publicPath: "../"
}
},
'css-loader',
'postcss-loader',
'sass-loader',
"css-loader",
"postcss-loader",
"sass-loader",
]
},
{
test: /\.yml/,
use: 'js-yaml-loader'
use: "js-yaml-loader"
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [{
loader: 'file-loader',
loader: "file-loader",
options: {
name: '[name].[ext]',
publicPath: './fonts/',
outputPath: 'fonts/'
name: "[name].[ext]",
publicPath: "./fonts/",
outputPath: "fonts/"
}
}]
}
......@@ -55,10 +62,12 @@ const config = {
new MiniCssExtractPlugin({
// Options similar to the same options in webpackOptions.output
// both options are optional
filename: "[name].css",
chunkFilename: "[id].css"
})
filename: "[name]-[hash].css",
chunkFilename: "[id]-[hash].css"
}),
new BundleTracker({ filename: "./webpack-stats.json" }),
],
};
module.exports = config;
\ No newline at end of file
module.exports = config;
frontend/webpack.config.build.js 0 → 100644
View file @ d455016d
const merge = require("webpack-merge");
const webpackConfig = require("./webpack.config.base");
module.exports = merge(webpackConfig, {
devtool: "source-map",
mode: "production",
});
frontend/webpack.config.dev.js 0 → 100644
View file @ d455016d
const merge = require("webpack-merge");
const webpackConfig = require("./webpack.config.base");
const webpack = require("webpack");
const devConfig = merge(webpackConfig, {
devtool: "eval",
mode: "development",
entry: {
main: [
"webpack-dev-server/client?http://localhost:3000",
"webpack/hot/only-dev-server",
]
},
output: {
publicPath: "http://localhost:3000/dist/bundles/",
path: __dirname + "/dist/bundles",
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new webpack.NoEmitOnErrorsPlugin(), // don't reload if there is an error
],
});
module.exports = devConfig;
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment