diff --git a/package-lock.json b/package-lock.json index 022ea93..c7bdca5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@aleleba/create-react-ssr", - "version": "2.0.3", + "version": "2.0.4", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@aleleba/create-react-ssr", - "version": "2.0.3", + "version": "2.0.4", "license": "MIT", "dependencies": { "@babel/register": "^7.17.7", @@ -53,6 +53,7 @@ "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", "@types/webpack-hot-middleware": "^2.25.6", + "@types/webpack-node-externals": "^2.5.3", "@typescript-eslint/eslint-plugin": "^5.25.0", "@typescript-eslint/parser": "^5.25.0", "babel-jest": "^28.1.0", @@ -3576,6 +3577,16 @@ "webpack": "^5" } }, + "node_modules/@types/webpack-node-externals": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/@types/webpack-node-externals/-/webpack-node-externals-2.5.3.tgz", + "integrity": "sha512-A9JxaR8QXoYT95egET4AmCFuChyTlP8d18ZAnmSHuIMsFdS7QlCQQ8pmN/+FHgLIkm+ViE/VngltT5avLACY9A==", + "dev": true, + "dependencies": { + "@types/node": "*", + "webpack": "^5" + } + }, "node_modules/@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", @@ -18165,6 +18176,16 @@ "webpack": "^5" } }, + "@types/webpack-node-externals": { + "version": "2.5.3", + "resolved": "https://registry.npmjs.org/@types/webpack-node-externals/-/webpack-node-externals-2.5.3.tgz", + "integrity": "sha512-A9JxaR8QXoYT95egET4AmCFuChyTlP8d18ZAnmSHuIMsFdS7QlCQQ8pmN/+FHgLIkm+ViE/VngltT5avLACY9A==", + "dev": true, + "requires": { + "@types/node": "*", + "webpack": "^5" + } + }, "@types/ws": { "version": "8.5.3", "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz", diff --git a/package.json b/package.json index 75713cc..0106332 100644 --- a/package.json +++ b/package.json @@ -1,13 +1,13 @@ { "name": "@aleleba/create-react-ssr", - "version": "2.0.4", + "version": "2.0.5", "description": "Starter Kit of server side render of react", "bin": "./bin/cli.js", "main": "src/server/index", "scripts": { "start": "node build/server/app-server.js", - "start:dev": "rm -rf build && webpack --mode=development --config webpack.config.dev.server.js && node build/server.js", - "build": "webpack-cli --config webpack.config.js", + "start:dev": "rm -rf build && webpack --mode=development --config webpack.config.dev.server.ts && node build/server.js", + "build": "webpack-cli --config webpack.config.ts", "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx", "lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix", "test": "jest", @@ -69,6 +69,7 @@ "@types/react": "^18.0.9", "@types/react-dom": "^18.0.4", "@types/webpack-hot-middleware": "^2.25.6", + "@types/webpack-node-externals": "^2.5.3", "@typescript-eslint/eslint-plugin": "^5.25.0", "@typescript-eslint/parser": "^5.25.0", "babel-jest": "^28.1.0", diff --git a/tsconfig.json b/tsconfig.json index 3261e01..b20eaa4 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -7,7 +7,6 @@ "esnext" ], "allowJs": true, - "skipLibCheck": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, @@ -27,7 +26,9 @@ ], "sourceMap": true, "baseUrl": "**/*", - "outDir": "build" + "outDir": "build", + "skipLibCheck": true, + "noImplicitAny": false }, "include": [ "**/*" diff --git a/webpack.config.dev.server.js b/webpack.config.dev.server.ts similarity index 86% rename from webpack.config.dev.server.js rename to webpack.config.dev.server.ts index c696877..8f4d299 100644 --- a/webpack.config.dev.server.js +++ b/webpack.config.dev.server.ts @@ -1,15 +1,16 @@ -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const webpackNodeExternals = require('webpack-node-externals'); -const path = require('path'); +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import webpackNodeExternals from 'webpack-node-externals'; +import path from 'path'; +import { Configuration } from 'webpack'; const ROOT_DIR = path.resolve(__dirname); -const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args); +const resolvePath = (...args: string[]) => path.resolve(ROOT_DIR, ...args); const BUILD_DIR = resolvePath('build'); const scriptExtensions = /\.(tsx|ts|js|jsx|mjs)$/; const styleExtensions = /\.(css|less|styl|scss|sass|sss)$/; const fontsExtensions = /\.(eot|otf|ttf|woff|woff2)$/; const fontsAndImagesExtensions = /\.(png|jpg|jpeg|gif|svg|ico|mp4|avi|ttf|otf|eot|woff|woff2|pdf)$/; -module.exports = { +const config: Configuration = { target: 'node', mode: 'development', name: 'server', @@ -82,4 +83,6 @@ module.exports = { filename: 'assets/app.css', }), ], -}; \ No newline at end of file +}; + +export default config \ No newline at end of file diff --git a/webpack.config.dev.js b/webpack.config.dev.ts similarity index 78% rename from webpack.config.dev.js rename to webpack.config.dev.ts index 4e890b3..8bce72f 100644 --- a/webpack.config.dev.js +++ b/webpack.config.dev.ts @@ -1,16 +1,19 @@ -const path = require('path'); -const dotenv = require('dotenv').config(); -const webpack = require('webpack'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); -const ESLintPlugin = require('eslint-webpack-plugin'); -const CopyPlugin = require('copy-webpack-plugin'); +import path from 'path'; +import * as dotenv from 'dotenv'; +import webpack, {Configuration} from 'webpack'; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin'; +import ESLintPlugin from 'eslint-webpack-plugin'; +import CopyPlugin from 'copy-webpack-plugin'; + +const dotEnvToParse = dotenv.config(); + const ROOT_DIR = path.resolve(__dirname); -const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args); +const resolvePath = (...args: string[]) => path.resolve(ROOT_DIR, ...args); const BUILD_DIR = resolvePath('build'); const PUBLIC_URL = process.env.PUBLIC_URL || '/'; -module.exports = { +const config: Configuration = { entry: ['webpack-hot-middleware/client?path=/reload_wss&timeout=2000&reload=true&autoConnect=true', `${ROOT_DIR}/../src/frontend/index.tsx`], output: { path: BUILD_DIR, @@ -70,7 +73,7 @@ module.exports = { }), new ESLintPlugin(), new webpack.DefinePlugin({ - 'process.env': JSON.stringify(dotenv.parsed), + 'process.env': JSON.stringify(dotEnvToParse.parsed), 'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL), }), new CopyPlugin({ @@ -101,7 +104,7 @@ module.exports = { priority: 1, filename: 'assets/vendor.js', enforce: true, - test (module, chunks){ + test (module: { nameForCondition: () => any; }, chunks: { name: string; }){ const name = module.nameForCondition && module.nameForCondition(); return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name); }, @@ -110,3 +113,5 @@ module.exports = { }, }, }; + +export default config diff --git a/webpack.config.js b/webpack.config.ts similarity index 86% rename from webpack.config.js rename to webpack.config.ts index 6f9dfeb..e98f546 100644 --- a/webpack.config.js +++ b/webpack.config.ts @@ -1,14 +1,17 @@ -const path = require('path'); -const dotenv = require('dotenv').config(); -const webpack = require('webpack'); -const CompressionWebpackPlugin = require('compression-webpack-plugin'); -const MiniCssExtractPlugin = require('mini-css-extract-plugin'); -const CssMinimizerPlugin = require('css-minimizer-webpack-plugin'); -const TerserPlugin = require('terser-webpack-plugin'); -const { WebpackManifestPlugin } = require('webpack-manifest-plugin'); -const { CleanWebpackPlugin } = require('clean-webpack-plugin'); -const ESLintPlugin = require('eslint-webpack-plugin'); -const CopyPlugin = require('copy-webpack-plugin'); +import path from 'path'; +import * as dotenv from 'dotenv'; +import webpack from 'webpack'; +import CompressionWebpackPlugin from 'compression-webpack-plugin'; +import MiniCssExtractPlugin from 'mini-css-extract-plugin'; +import CssMinimizerPlugin from 'css-minimizer-webpack-plugin'; +import TerserPlugin from 'terser-webpack-plugin'; +import { WebpackManifestPlugin } from 'webpack-manifest-plugin'; +import { CleanWebpackPlugin } from 'clean-webpack-plugin'; +import ESLintPlugin from 'eslint-webpack-plugin'; +import CopyPlugin from 'copy-webpack-plugin'; + +const dotEnvToParse = dotenv.config(); + const ROOT_DIR = path.resolve(__dirname); const resolvePath = (...args) => path.resolve(ROOT_DIR, ...args); const BUILD_DIR = resolvePath('build'); @@ -86,7 +89,7 @@ const frontendConfig = { }), new ESLintPlugin(), new webpack.DefinePlugin({ - 'process.env': JSON.stringify(dotenv.parsed), + 'process.env': JSON.stringify(dotEnvToParse.parsed), 'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL), }), new CopyPlugin({ @@ -203,7 +206,7 @@ const serverConfig = { new CleanWebpackPlugin(), new ESLintPlugin(), new webpack.DefinePlugin({ - 'process.env': JSON.stringify(dotenv.parsed), + 'process.env': JSON.stringify(dotEnvToParse.parsed), 'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL), }), new InjectManifest({ @@ -237,4 +240,4 @@ const serverConfig = { }, }; -module.exports = [frontendConfig, serverConfig]; +export default [frontendConfig, serverConfig];