Skip to content

Commit

Permalink
[Feat] Switch to neutrino (#1000)
Browse files Browse the repository at this point in the history
* Switched to neutrino

* Slimmed down validator.js

* Potential fix for multiple babel-plugin-import

* Remove craco config

* Fixed babel issues with validator.js

* Revert envs

* Fix packages

* Fix local env

* Fix linter

* Fixed env problem

Co-authored-by: Ali Nouri <dynamic11@users.noreply.github.com>
  • Loading branch information
BenJeau and dynamic11 committed Oct 28, 2020
1 parent c95ef50 commit 1866c4e
Show file tree
Hide file tree
Showing 12 changed files with 2,388 additions and 3,978 deletions.
4 changes: 2 additions & 2 deletions docker-compose.yml
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ services:
context: ./services/frontend
dockerfile: Dockerfile.local
ports:
- 3000:3000 # port craco
- 3031:8888 # port for webpack analyzer
- 3000:3000 # port neutrino.js
- 3031:3031 # port for webpack analyzer
volumes:
- ./services/frontend:/italent-frontend
- frontend-data:/italent-frontend/node_modules
Expand Down
116 changes: 116 additions & 0 deletions services/frontend/.neutrinorc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
const react = require("@neutrinojs/react");
const jest = require("@neutrinojs/jest");
const style = require("@neutrinojs/style-loader");
const antTheme = require("./src/antdTheme");
const path = require("path");

module.exports = {
options: {
root: __dirname,
},
use: [
react({
devServer: {
contentBase: path.join(__dirname, "public"),
host: "0.0.0.0",
port: 3000,
},
minify: {
source: process.env.NODE_ENV === "production",
},
html: {
template: "public/index.ejs",
favicon: "public/favicon.ico",
},
babel: {
plugins: [
[
"import",
{
libraryName: "validator",
libraryDirectory: "es/lib",
camel2DashComponentName: false,
},
"validator",
],
[
"import",
{
libraryName: "antd",
libraryDirectory: "es",
style: true,
},
"antd",
],
],
},
style: {
test: /\.(css|scss)$/,
modulesTest: /\.module\.(css|scss)$/,
loaders: [
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [require("autoprefixer")],
},
},
},
{
loader: "sass-loader",
useId: "sass",
},
],
},
}),
style({
test: /\.less/,
modulesTest: /\.module\.less$/,
ruleId: "style-less",
styleUseId: "style-less",
cssUseId: "css-less",
extractId: "extract-less",
loaders: [
{
loader: "less-loader",
useId: "less",
options: {
lessOptions: {
modifyVars: antTheme,
javascriptEnabled: true,
},
},
},
],
}),
({ config }) => {
config
.plugin("antd-dayjs")
.use(require.resolve("antd-dayjs-webpack-plugin"));

if (process.env.NODE_ENV === "production") {
config.optimization
.minimize(true)
.minimizer("terser-plugin")
.use(require.resolve("terser-webpack-plugin"));
config.optimization
.minimize(true)
.minimizer("css-minimizer")
.use(require.resolve("css-minimizer-webpack-plugin"));
}

if (process.env.ANALYZE_BUILD === "true") {
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");

config.plugin("bundle-analyzer").use(BundleAnalyzerPlugin, [
{
analyzerHost: "0.0.0.0",
analyzerPort: 3031,
analyzerMode: "server",
},
]);
}
},
jest(),
],
};
3 changes: 3 additions & 0 deletions services/frontend/babel.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
const neutrino = require("neutrino");

module.exports = neutrino().babel();
31 changes: 0 additions & 31 deletions services/frontend/craco.config.js

This file was deleted.

5 changes: 5 additions & 0 deletions services/frontend/jest.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const neutrino = require('neutrino');

process.env.NODE_ENV = process.env.NODE_ENV || 'test';

module.exports = neutrino().jest();
40 changes: 27 additions & 13 deletions services/frontend/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,58 @@
"dependencies": {
"@ant-design/icons": "4.2.2",
"@beam-australia/react-env": "2.1.2",
"@craco/craco": "5.7.0",
"@neutrinojs/jest": "9.4.0",
"@neutrinojs/react": "9.4.0",
"@neutrinojs/style-loader": "^9.4.0",
"@react-keycloak/web": "3.0.0",
"@reduxjs/toolkit": "1.4.0",
"antd": "4.7.0",
"antd-dayjs-webpack-plugin": "1.0.1",
"autoprefixer": "^10.0.1",
"axios": "0.20.0",
"babel-plugin-import": "^1.13.1",
"bizcharts": "4.0.14",
"craco-antd": "1.18.1",
"css-minimizer-webpack-plugin": "^1.1.5",
"dayjs": "1.8.35",
"history": "5.0.0",
"keycloak-js": "11.0.2",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"lodash-es": "^4.17.15",
"node-sass": "4.14.1",
"neutrino": "9.4.0",
"postcss": "^8.1.4",
"postcss-loader": "^4.0.4",
"prop-types": "15.7.2",
"query-string": "6.13.5",
"react": "16.13.1",
"react-app-polyfill": "1.0.6",
"react-dom": "16.13.1",
"react-helmet": "^6.1.0",
"react-highlight-words": "0.16.0",
"react-hot-loader": "4.13.0",
"react-intl": "5.8.6",
"react-redux": "7.2.1",
"react-router": "5.2.0",
"react-router-dom": "5.2.0",
"react-scripts": "3.4.3",
"redux": "4.0.5",
"redux-persist": "6.0.0",
"sass": "^1.27.0",
"sass-loader": "^10.0.4",
"serve": "11.3.2",
"validator": "13.1.17"
"terser-webpack-plugin": "4.2.3",
"validator": "13.1.17",
"webpack-cli": "3.3.12"
},
"scripts": {
"dev": "react-env && craco start",
"dev": "react-env && webpack-dev-server --mode development",
"prestart": "react-env --dest ./build",
"start": "serve -s build",
"build": "craco build",
"test": "craco test",
"lint": "./node_modules/.bin/eslint src --ext .js,.jsx",
"build": "NODE_ENV=production webpack --mode production",
"test": "jest",
"lint": "./node_modules/.bin/eslint --cache --format codeframe --ext jsx,js src",
"i18n:check": "node ./src/i18n/check",
"i18n:cleanup": "node ./src/i18n/cleanup",
"analyze": "ANALYZE_BUILD=true craco build"
"analyze": "ANALYZE_BUILD=true yarn build"
},
"eslintConfig": {
"extends": "react-app"
Expand All @@ -64,8 +76,7 @@
]
},
"devDependencies": {
"craco-fast-refresh": "^1.0.2",
"eslint": "6.6.0",
"eslint": "7.12.0",
"eslint-config-airbnb": "18.2.0",
"eslint-config-prettier": "6.12.0",
"eslint-plugin-import": "2.22.1",
Expand All @@ -74,7 +85,10 @@
"eslint-plugin-prettier": "3.1.4",
"eslint-plugin-react": "7.21.4",
"eslint-plugin-react-hooks": "4.1.2",
"jest": "26.6.1",
"prettier": "2.1.2",
"webpack-bundle-analyzer": "^3.9.0"
"webpack": "4.44.2",
"webpack-bundle-analyzer": "3.9.0",
"webpack-dev-server": "3.11.0"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="theme-color" content="#087472" />
<meta charset="utf-8" />
<style>
Expand Down Expand Up @@ -33,9 +32,8 @@
name="description"
content="Search tool to find people based on experience and skills"
/>
<script src="%PUBLIC_URL%/env.js"></script>
<script src="/env.js"></script>
</head>

<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
Expand Down
3 changes: 2 additions & 1 deletion services/frontend/src/App.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import React from "react";
import { hot } from "react-hot-loader";
import Routes from "./routes/Routes";
import AppProvider from "./utils/AppProvider";

Expand All @@ -12,4 +13,4 @@ const App = () => (
</AppProvider>
);

export default App;
export default hot(module)(App);
4 changes: 2 additions & 2 deletions services/frontend/src/components/resultsCard/ResultsCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import map from "lodash-es/map";
import useAxios from "../../utils/useAxios";
import ResultsCardView from "./ResultsCardView";
import handleError from "../../functions/handleError";
import { ReactComponent as YourSvg } from "./online_team_meeting_.svg";
import EmptyImage from "./online_team_meeting_.svg";

const ResultsCard = () => {
const [results, setResults] = useState(undefined);
Expand Down Expand Up @@ -69,7 +69,7 @@ const ResultsCard = () => {
return (
<>
<Row align="middle" justify="center" style={{ marginTop: 40 }}>
<YourSvg height={250} />
<img src={EmptyImage} height={250} alt="Empty results page" />
</Row>
<Row align="middle" justify="center" style={{ marginTop: 20 }}>
<p style={{ textAlign: "center", maxWidth: 250 }}>
Expand Down
4 changes: 2 additions & 2 deletions services/frontend/src/index.jsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import ReactDOM from "react-dom";
import { render } from "react-dom";
import "react-app-polyfill/ie11";
import "react-app-polyfill/stable";
import App from "./App";

ReactDOM.render(<App />, document.getElementById("root"));
render(<App />, document.getElementById("root"));
6 changes: 6 additions & 0 deletions services/frontend/webpack.config.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// Whilst the configuration object can be modified here, the recommended way of making
// changes is via the presets' options or Neutrino's API in `.neutrinorc.js` instead.
// Neutrino's inspect feature can be used to view/export the generated configuration.
const neutrino = require('neutrino');

module.exports = neutrino().webpack();
Loading

0 comments on commit 1866c4e

Please sign in to comment.