aleleba/create-react-ssr
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-ssr.git synced 2025-01-09 13:36:54 -06:00
Code Issues Actions Packages Projects 1 Releases Wiki Activity

PR-753737: Se agrega el build del server.

Browse Source
This commit is contained in:
Alejandro Lembke Barrientos 2022-04-25 23:28:32 +00:00
parent ed62a71551
commit 39820a070e
6 changed files with 132 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
client/.eslintrc.js
View File

@ -41,7 +41,8 @@ module.exports = {
'eol-last': [ 'eol-last': [
'error', 'error',
'always' 'always'
] ],
'@typescript-eslint/no-var-requires': 0,
}, },
'settings': { 'settings': {
'react': { 'react': {

16
client/package-lock.json generated
View File

@ -72,6 +72,7 @@
"webpack-dev-middleware": "^5.3.1", "webpack-dev-middleware": "^5.3.1",
"webpack-dev-server": "^4.8.1", "webpack-dev-server": "^4.8.1",
"webpack-hot-middleware": "^2.25.1", "webpack-hot-middleware": "^2.25.1",
"webpack-node-externals": "^3.0.0",
"workbox-webpack-plugin": "^6.5.3", "workbox-webpack-plugin": "^6.5.3",
"workbox-window": "^6.5.3" "workbox-window": "^6.5.3"
} }
@ -11088,6 +11089,15 @@
"node": ">=10.0.0" "node": ">=10.0.0"
} }
}, },
"node_modules/webpack-node-externals": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz",
"integrity": "sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==",
"dev": true,
"engines": {
"node": ">=6"
}
},
"node_modules/webpack-sources": { "node_modules/webpack-sources": {
"version": "3.2.3", "version": "3.2.3",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
@ -19593,6 +19603,12 @@
"wildcard": "^2.0.0" "wildcard": "^2.0.0"
} }
}, },
"webpack-node-externals": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/webpack-node-externals/-/webpack-node-externals-3.0.0.tgz",
"integrity": "sha512-LnL6Z3GGDPht/AigwRh2dvL9PQPFQ8skEpVrWZXLWBYmqcaojHNN0onvHzie6rq7EWKrrBfPYqNEzTJgiwEQDQ==",
"dev": true
},
"webpack-sources": { "webpack-sources": {
"version": "3.2.3", "version": "3.2.3",
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz", "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",

3
client/package.json
View File

@ -4,7 +4,7 @@
"description": "Starter Kit de server side render de react", "description": "Starter Kit de server side render de react",
"main": "src/server/index", "main": "src/server/index",
"scripts": { "scripts": {
"start": "ts-node src/server", "start": "node build/server/app-server.js",
"start:dev": "nodemon --exec 'ts-node' src/server/index -e js,json,ts,tsx,jsx", "start:dev": "nodemon --exec 'ts-node' src/server/index -e js,json,ts,tsx,jsx",
"build": "webpack-cli --config webpack.config.js", "build": "webpack-cli --config webpack.config.js",
"lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx", "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
@ -89,6 +89,7 @@
"webpack-dev-middleware": "^5.3.1", "webpack-dev-middleware": "^5.3.1",
"webpack-dev-server": "^4.8.1", "webpack-dev-server": "^4.8.1",
"webpack-hot-middleware": "^2.25.1", "webpack-hot-middleware": "^2.25.1",
"webpack-node-externals": "^3.0.0",
"workbox-webpack-plugin": "^6.5.3", "workbox-webpack-plugin": "^6.5.3",
"workbox-window": "^6.5.3" "workbox-window": "^6.5.3"
} }

2
client/src/server/index.js
View File

@ -8,7 +8,7 @@ require('@babel/register')({
'presets': [ 'presets': [
'@babel/preset-env', '@babel/preset-env',
'@babel/preset-react', '@babel/preset-react',
"@babel/preset-typescript", '@babel/preset-typescript',
// '@babel/preset-flow', // '@babel/preset-flow',
] ]
}); });

7
client/src/server/server.js
View File

@ -66,9 +66,10 @@ if(env === 'development'){
} }
const setResponse = (html, preloadedState, manifest) => { const setResponse = (html, preloadedState, manifest) => {
const mainStyles = manifest ? manifest['main.css'] : 'assets/app.css'; const mainStyles = manifest ? manifest['frontend.css'] : 'assets/app.css';
const mainBuild = manifest ? manifest['main.js'] : 'assets/app.js'; const mainBuild = manifest ? manifest['frontend.js'] : 'assets/app.js';
const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js'; const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
const manifestJson = manifest ? `<link rel="manifest" href="${manifest['manifest.json']}">` : '';
return(` return(`
<!DOCTYPE html> <!DOCTYPE html>
@ -79,7 +80,7 @@ const setResponse = (html, preloadedState, manifest) => {
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="theme-color" content="#000000"> <meta name="theme-color" content="#000000">
<link rel="manifest" href="manifest.json"> ${manifestJson}
<link href="${mainStyles}" rel="stylesheet" type="text/css"></link> <link href="${mainStyles}" rel="stylesheet" type="text/css"></link>
<title>App</title> <title>App</title>
</head> </head>

111
client/webpack.config.js
View File

@ -10,13 +10,114 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const ESLintPlugin = require('eslint-webpack-plugin'); const ESLintPlugin = require('eslint-webpack-plugin');
const CopyPlugin = require('copy-webpack-plugin'); const CopyPlugin = require('copy-webpack-plugin');
const { InjectManifest } = require('workbox-webpack-plugin'); const { InjectManifest } = require('workbox-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
const PUBLIC_URL = process.env.PUBLIC_URL || '/'; const PUBLIC_URL = process.env.PUBLIC_URL || '/';
module.exports = { const frontendConfig = {
entry: './src/frontend/index.tsx', entry: {
frontend: './src/frontend/index.tsx',
},
output: { output: {
path: path.resolve(__dirname, 'build'), path: path.resolve(__dirname, 'build'),
filename: 'assets/app-[fullhash].js', filename: 'assets/app-[name]-[fullhash].js',
publicPath: PUBLIC_URL,
},
resolve: {
extensions: ['.js', '.jsx','.ts','.tsx', '.json'],
alias: {
'@components': path.resolve(__dirname, 'src/frontend/components/'),
'@styles': path.resolve(__dirname, 'src/frontend/styles/'),
}
},
mode: 'production',
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
},
},
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
],
},
plugins: [
new CompressionWebpackPlugin({
test: /\.(js|css)$/,
filename: '[path][base].gz',
}),
new MiniCssExtractPlugin({
filename: 'assets/app-[fullhash].css',
}),
new WebpackManifestPlugin({
fileName: 'assets/manifest-hash.json',
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: [
'**/*',
'!server/**',
],
}),
new ESLintPlugin(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
'process.env.PUBLIC_URL': JSON.stringify(PUBLIC_URL),
}),
new CopyPlugin({
patterns: [
{
from: './public/manifest.json', to: '',
}
]
}),
new InjectManifest({
swSrc: './service-worker.js',
swDest: 'service-worker.js',
}),
],
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin(),
],
splitChunks: {
chunks: 'async',
cacheGroups: {
vendors: {
name: 'vendors',
chunks: 'all',
reuseExistingChunk: true,
priority: 1,
filename: 'assets/vendor-[name]-[fullhash].js',
enforce: true,
test (module, chunks){
const name = module.nameForCondition && module.nameForCondition();
return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
},
},
},
},
},
};
const serverConfig = {
entry: {
server: './src/server/index.js',
},
target: "node",
externals: [nodeExternals()],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'server/app-[name].js',
publicPath: PUBLIC_URL, publicPath: PUBLIC_URL,
}, },
resolve: { resolve: {
@ -89,7 +190,7 @@ module.exports = {
chunks: 'all', chunks: 'all',
reuseExistingChunk: true, reuseExistingChunk: true,
priority: 1, priority: 1,
filename: 'assets/vendor-[fullhash].js', filename: 'assets/vendor-[name]-[fullhash].js',
enforce: true, enforce: true,
test (module, chunks){ test (module, chunks){
const name = module.nameForCondition && module.nameForCondition(); const name = module.nameForCondition && module.nameForCondition();
@ -100,3 +201,5 @@ module.exports = {
}, },
}, },
}; };
module.exports = [frontendConfig, serverConfig];