remove craco/react-scripts, configure webpack ourselves

This commit is contained in:
Paul Bienkowski 2021-11-26 13:40:12 +01:00
parent 5fcb959002
commit bf1536f443
9 changed files with 3070 additions and 28069 deletions

View file

@ -11,7 +11,7 @@ ADD frontend/package.json frontend/package-lock.json /opt/obs/frontend/
RUN echo update-notifier=false >> ~/.npmrc
RUN npm ci
ADD frontend/tsconfig.json frontend/craco.config.js /opt/obs/frontend/
ADD frontend/tsconfig.json frontend/index.html frontend/webpack.config.js /opt/obs/frontend/
ADD frontend/src /opt/obs/frontend/src/
ADD frontend/public /opt/obs/frontend/public/

View file

@ -5,6 +5,6 @@ ADD package.json package-lock.json /opt/obs/frontend/
RUN echo update-notifier=false >> ~/.npmrc
RUN npm ci
ADD tsconfig.json craco.config.js /opt/obs/frontend/
ADD tsconfig.json index.html webpack.config.js /opt/obs/frontend/
ADD public/ /opt/obs/frontend/public/
ADD src/ /opt/obs/frontend/src/

View file

@ -9,7 +9,7 @@ ADD package.json package-lock.json /opt/obs/frontend/
RUN echo update-notifier=false >> ~/.npmrc
RUN npm ci
ADD tsconfig.json craco.config.js /opt/obs/frontend/
ADD tsconfig.json index.html webpack.config.js /opt/obs/frontend/
ADD public/ /opt/obs/frontend/public/
ADD src/ /opt/obs/frontend/src/

View file

@ -1,18 +0,0 @@
module.exports = {
plugins: [
{plugin: require('@semantic-ui-react/craco-less')},
{
plugin: {
overrideWebpackConfig: ({webpackConfig, cracoConfig, pluginOptions, context: {env, paths}}) => {
webpackConfig.resolve.alias = {
...webpackConfig.resolve.alias,
'mapbox-gl': 'maplibre-gl',
}
return webpackConfig
},
options: {},
},
},
],
}

View file

@ -3,19 +3,20 @@
<head>
<base href="%PUBLIC_URL%">
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<link rel="icon" href="public/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Upload the tracks recorded with your OpenBikeSensor device to this portal and participate in the accumulation of Open Data."
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<link rel="apple-touch-icon" href="public/apple-touch-icon.png" />
<link rel="manifest" href="public/manifest.json" />
<title>OpenBikeSensor Portal</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="./src/index.js"></script>
</body>
</html>

30924
frontend/package-lock.json generated

File diff suppressed because it is too large Load diff

View file

@ -2,14 +2,11 @@
"name": "openbikesensor-portal-frontend",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "webpack-dev-server",
"build": "webpack"
},
"dependencies": {
"@testing-library/jest-dom": "^5.15.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"@types/jest": "^26.0.24",
"@types/node": "^14.17.34",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"classnames": "^2.3.1",
"downloadjs": "^1.4.7",
"luxon": "^1.28.0",
@ -23,26 +20,19 @@
"react-markdown": "^5.0.3",
"react-redux": "^7.2.6",
"react-router-dom": "^5.3.0",
"react-scripts": "^4.0.3",
"redux": "^4.1.2",
"redux-localstorage": "^0.4.1",
"rxjs": "^6.6.7",
"rxjs-hooks": "^0.6.2",
"sass": "^1.43.5",
"fomantic-ui-less": "^2.8.8",
"semantic-ui-react": "^2.0.4",
"typescript": "^4.5.2",
"web-vitals": "^0.2.4"
},
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
"ts-loader": "^9.2.6",
"typescript": "^4.5.2"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
"react-app"
]
},
"browserslist": {
@ -59,11 +49,22 @@
},
"proxy": "http://api:3000",
"devDependencies": {
"@craco/craco": "^6.4.2",
"@semantic-ui-react/craco-less": "^1.2.3",
"@babel/core": "^7.16.0",
"@babel/preset-env": "^7.16.4",
"@babel/preset-react": "^7.16.0",
"@babel/preset-typescript": "^7.16.0",
"@types/lodash": "^4.14.177",
"@types/node": "^14.17.34",
"@types/react": "^17.0.37",
"@types/react-dom": "^17.0.11",
"@types/react-redux": "^7.1.20",
"@types/react-router-dom": "^5.3.2",
"semantic-ui-less": "^2.4.1"
"babel-loader": "^8.2.3",
"css-loader": "^6.5.1",
"less-loader": "^10.2.0",
"style-loader": "^3.3.1",
"webpack": "^5.64.4",
"webpack-cli": "^4.9.1",
"webpack-dev-server": "^4.5.0"
}
}

View file

@ -1 +0,0 @@
/// <reference types="react-scripts" />

View file

@ -0,0 +1,84 @@
const path = require('path');
module.exports = {
entry: './src/index.js',
mode: 'development',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
},
resolve: {
extensions: ['.tsx', '.ts', '.js'],
alias: {
'mapbox-gl': 'maplibre-gl',
'../../theme.config': path.resolve('./src/semantic-ui/theme.config')
},
modules: ['node_modules', 'src'],
},
module: {
rules: [
{
test: /\.(m?j|t)sx?$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-react',
'@babel/preset-typescript',
'@babel/preset-env']
}
}
},
{
test: /\.css$/i,
use: [
"style-loader",
"css-loader"
],
},
{
test: /\.module\.less$/i,
use: [
// compiles Less to CSS
"style-loader",
{loader: "css-loader", options: { modules: true,}},
{loader: "less-loader", options: {
lessOptions: {
math: 'always',
}
}},
],
},
{
test: /\.less$/i,
exclude: /\.module\.less$/i,
use: [
// compiles Less to CSS
"style-loader",
"css-loader",
{loader: "less-loader", options: {
lessOptions: {
math: 'always',
}
}},
],
},
{
test: /\.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
],
},
};