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

PR-753737: Se agrega ESLint a webpack.

Browse Source
This commit is contained in:
Alejandro Lembke Barrientos 2022-04-20 00:21:16 +00:00
parent e87a638e7d
commit d6f2d2d5dd
20 changed files with 3164 additions and 295 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/.eslintignore Normal file
View File

@ -0,0 +1,7 @@
#Build
build
#Webpack
webpack.config.js
webpack.config.dev.js
#Server
/server/index.js

51
src/.eslintrc.js Normal file
View File

@ -0,0 +1,51 @@
module.exports = {
'env': {
'browser': true,
'node': true,
'es2021': true
},
'extends': [
'eslint:recommended',
'plugin:react/recommended',
'plugin:@typescript-eslint/recommended'
],
'parser': '@typescript-eslint/parser',
'parserOptions': {
'ecmaFeatures': {
'jsx': true
},
'ecmaVersion': 'latest',
'sourceType': 'module'
},
'plugins': [
'react',
'@typescript-eslint'
],
'rules': {
'indent': [
'error',
'tab'
],
'linebreak-style': [
'error',
'unix'
],
'quotes': [
'error',
'single'
],
'semi': [
'error',
'always'
],
'eol-last': [
'error',
'always'
]
},
'settings': {
'react': {
'version': 'detect',
}
}
};

16
src/PRNameGenerator.ts
View File

@ -1,11 +1,11 @@
const PRName = function () {
let ID = "";
// let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
let characters = "0123456789";
for ( var i = 0; i < 6; i++ ) {
ID += characters.charAt(Math.floor(Math.random() * 10));
}
return 'PR-'+ID;
let ID = '';
// let characters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const characters = '0123456789';
for ( let i = 0; i < 6; i++ ) {
ID += characters.charAt(Math.floor(Math.random() * 10));
}
return 'PR-'+ID;
};
console.log(PRName())
console.log(PRName());

12
src/config/index.js
View File

@ -1,8 +1,8 @@
const config = {
env: process.env.ENV ? process.env.ENV : 'production',
port: process.env.PORT ? process.env.PORT : 80,
// portDev: process.env.PORT_DEV ? process.env.PORT_DEV : 3000,
// portReloadDev: process.env.PORT_RELOAD_DEV,
}
env: process.env.ENV ? process.env.ENV : 'production',
port: process.env.PORT ? process.env.PORT : 80,
// portDev: process.env.PORT_DEV ? process.env.PORT_DEV : 3000,
// portReloadDev: process.env.PORT_RELOAD_DEV,
};
module.exports = { config: config };
module.exports = { config: config };

4
src/frontend/components/App.jsx
View File

@ -1,6 +1,6 @@
import React from 'react';
import PrincipalRoutes from './PrincipalRoutes';
const App = () => <PrincipalRoutes />
const App = () => <PrincipalRoutes />;
export default App;
export default App;

2
src/frontend/components/InitialComponent.jsx
View File

@ -1,5 +1,5 @@
import React from 'react';
const InitialComponent = () => <h1>Hello React!</h1>
const InitialComponent = () => <h1>Hello React!</h1>;
export default InitialComponent;

2
src/frontend/components/OtherComponent.jsx
View File

@ -1,5 +1,5 @@
import React from 'react';
const OtherComponent = () => <h1>Other Component!</h1>
const OtherComponent = () => <h1>Other Component!</h1>;
export default OtherComponent;

8
src/frontend/components/PrincipalRoutes.jsx
View File

@ -4,8 +4,8 @@ import { useRoutes } from 'react-router-dom';
import routes from '../../routes';
const PrincipalRoutes = () => {
let element = useRoutes(routes);
return element
}
let element = useRoutes(routes);
return element;
};
export default PrincipalRoutes;
export default PrincipalRoutes;

51
src/frontend/index.js
View File

@ -1,10 +1,10 @@
import React from 'react';
import { hydrateRoot } from 'react-dom/client';
//Router
// Router
import { BrowserRouter as Router } from 'react-router-dom';
//History
// History
import { createBrowserHistory } from 'history';
//Redux
// Redux
import { createStore } from 'redux'; //, applyMiddleware
import { Provider } from 'react-redux';
import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension';
@ -14,43 +14,44 @@ import reducer from './reducers';
import App from './components/App';
import './styles/global.sass';
//Redux DevTools
// Redux DevTools
/* declare global {
interface Window {
__REDUX_DEVTOOLS_EXTENSION_COMPOSE__?: typeof compose;
}
} */
const { env } = config
const { env } = config;
const composeEnhancers = composeWithDevToolsWeb({
// Specify here name, actionsBlacklist, actionsCreators and other options
// Specify here name, actionsBlacklist, actionsCreators and other options
});
const preloadedState = window.__PRELOADED_STATE__
const preloadedState = window.__PRELOADED_STATE__;
const store = env === 'development' ? createStore(
reducer,
preloadedState,
composeEnhancers(),
reducer,
preloadedState,
composeEnhancers(),
) : createStore(
reducer,
preloadedState,
)
reducer,
preloadedState,
);
delete window.__PRELOADED_STATE__
delete window.__PRELOADED_STATE__;
const container = document.getElementById('app');
const history = createBrowserHistory()
const history = createBrowserHistory();
const root = hydrateRoot(container,
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
//Add this comment to update later app and remove warning
/*{
// add "const root" to be able to rerender.
hydrateRoot(container,
<Provider store={store}>
<Router history={history}>
<App />
</Router>
</Provider>,
// Add this comment to update later app and remove warning
/* {
onRecoverableError: (error) => {
console.error("recoverable", error);
}
@ -67,5 +68,5 @@ const root = hydrateRoot(container,
); */
if (module.hot) {
module.hot.accept();
}
module.hot.accept();
}

8
src/frontend/reducers/index.js
View File

@ -2,8 +2,8 @@ import { combineReducers } from 'redux';
import testReducer from './testReducer';
const rootReducer = combineReducers({
//Here comes the reducers
testReducer
})
// Here comes the reducers
testReducer
});
export default rootReducer
export default rootReducer;

4
src/frontend/reducers/initialState.js
View File

@ -1,3 +1,3 @@
let initialState = {}
let initialState = {};
export default initialState
export default initialState;

28
src/frontend/reducers/testReducer.js
View File

@ -1,18 +1,18 @@
const initialState = {
hello: 'world'
}
hello: 'world'
};
let testReducer = (state = initialState, action) => {
switch (action.type){
case 'CHANGE_HELLO': {
let newHello = action.payload.hello
return {
hello: newHello
}
}
default:
return state
}
}
switch (action.type){
case 'CHANGE_HELLO': {
let newHello = action.payload.hello;
return {
hello: newHello
};
}
default:
return state;
}
};
export default testReducer
export default testReducer;

2799
src/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
src/package.json
View File

@ -6,6 +6,8 @@
"scripts": {
"start": "nodemon server/index",
"build": "webpack-cli --config webpack.config.js",
"lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
"lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
@ -44,11 +46,16 @@
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.5",
"@typescript-eslint/eslint-plugin": "^5.20.0",
"@typescript-eslint/parser": "^5.20.0",
"babel-loader": "^8.2.4",
"clean-webpack-plugin": "^4.0.0",
"compression-webpack-plugin": "^9.2.0",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^3.4.1",
"eslint": "^8.13.0",
"eslint-plugin-react": "^7.29.4",
"eslint-webpack-plugin": "^3.1.1",
"mini-css-extract-plugin": "^2.6.0",
"nodemon": "^2.0.15",
"react-refresh": "^0.12.0",

20
src/routes/index.js
View File

@ -1,16 +1,16 @@
import React from "react";
import InitialComponent from "../frontend/components/InitialComponent";
import OtherComponent from "../frontend/components/OtherComponent";
import React from 'react';
import InitialComponent from '../frontend/components/InitialComponent';
import OtherComponent from '../frontend/components/OtherComponent';
const OTHER_COMPONENT = {
path: 'other-component',
element: <OtherComponent />
}
path: 'other-component',
element: <OtherComponent />
};
const INITIAL_COMPONENT = {
path: '/',
element: <InitialComponent />,
}
path: '/',
element: <InitialComponent />,
};
export default [ INITIAL_COMPONENT, OTHER_COMPONENT ]
export default [ INITIAL_COMPONENT, OTHER_COMPONENT ];

14
src/server/getHashManifest.js
View File

@ -1,11 +1,11 @@
import fs from 'fs';
const getHashManifest = () => {
try {
return JSON.parse(fs.readFileSync(`${__dirname}/../build/assets/manifest-hash.json`))
}catch(err){
console.error(err)
}
}
try {
return JSON.parse(fs.readFileSync(`${__dirname}/../build/assets/manifest-hash.json`));
}catch(err){
console.error(err);
}
};
export default getHashManifest
export default getHashManifest;

44
src/server/index.js
View File

@ -3,30 +3,30 @@ require('dotenv').config();
require('ignore-styles');
require('@babel/register')({
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
'presets': [
'@babel/preset-env',
'@babel/preset-react'
]
});
require('asset-require-hook')({
extensions: [
//images
'jpg',
'png',
'svg',
'gif',
//videos
'mp4',
'avi',
//typography
'ttf',
'otf',
'eot',
//files
'pdf'
],
name: '/assets/[hash].[ext]',
extensions: [
// images
'jpg',
'png',
'svg',
'gif',
// videos
'mp4',
'avi',
// typography
'ttf',
'otf',
'eot',
// files
'pdf'
],
name: '/assets/[hash].[ext]',
});
require('./server');
require('./server');

104
src/server/server.js
View File

@ -13,7 +13,7 @@ import webpackHotMiddleware from 'webpack-hot-middleware';
import React from 'react';
import { renderToString } from 'react-dom/server';
//Router
import { StaticRouter } from "react-router-dom/server";
import { StaticRouter } from 'react-router-dom/server';
//Redux
import { createStore } from 'redux'; //, applyMiddleware
import { Provider } from 'react-redux';
@ -24,49 +24,49 @@ import getHashManifest from './getHashManifest';
//App
import App from '../frontend/components/App';
const { env, port } = config
const { env, port } = config;
const app = express();
if(env === 'development'){
const compiler = webpack(webpackConfig);
const serverConfig = {
serverSideRender: true,
publicPath: webpackConfig.output.publicPath,
};
const compiler = webpack(webpackConfig);
const serverConfig = {
serverSideRender: true,
publicPath: webpackConfig.output.publicPath,
};
app
.use(webpackDevMiddleware(compiler, serverConfig))
.use(webpackHotMiddleware(compiler, {
path: "/reload_wss",
heartbeat: 1000,
}));
app
.use(webpackDevMiddleware(compiler, serverConfig))
.use(webpackHotMiddleware(compiler, {
path: '/reload_wss',
heartbeat: 1000,
}));
}else{
app
.use((req, res, next) => {
if(!req.hashManifest) req.hashManifest = getHashManifest();
next();
})
.use(express.static(`${__dirname}/../build`))
.use(helmet())
.use(helmet.permittedCrossDomainPolicies())
.use(helmet({
contentSecurityPolicy: {
directives: {
...helmet.contentSecurityPolicy.getDefaultDirectives(),
"script-src": ["'self'", "'unsafe-inline'"],//"example.com"
},
},
}))
.disable('x-powered-by');
app
.use((req, res, next) => {
if(!req.hashManifest) req.hashManifest = getHashManifest();
next();
})
.use(express.static(`${__dirname}/../build`))
.use(helmet())
.use(helmet.permittedCrossDomainPolicies())
.use(helmet({
contentSecurityPolicy: {
directives: {
...helmet.contentSecurityPolicy.getDefaultDirectives(),
'script-src': ['\'self\'', '\'unsafe-inline\''],//"example.com"
},
},
}))
.disable('x-powered-by');
}
const setResponse = (html, preloadedState, manifest) => {
const mainStyles = manifest ? manifest['main.css'] : 'assets/app.css';
const mainBuild = manifest ? manifest['main.js'] : 'assets/app.js';
const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
const mainStyles = manifest ? manifest['main.css'] : 'assets/app.css';
const mainBuild = manifest ? manifest['main.js'] : 'assets/app.js';
const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
return(`
return(`
<!DOCTYPE html>
<html lang="es">
<head>
@ -85,25 +85,25 @@ const setResponse = (html, preloadedState, manifest) => {
<script src="${vendorBuild}" type="text/javascript"></script>
</body>
</html>
`)
}
const renderApp = (req, res) => {
const store = createStore(reducer, initialState)
const preloadedState = store.getState();
const html = renderToString(
<Provider store={store}>
<StaticRouter location={req.url}>
<App />
</StaticRouter>
</Provider>
)
res.send(setResponse(html, preloadedState, req.hashManifest));
`);
};
app.get('*', renderApp)
const renderApp = (req, res) => {
const store = createStore(reducer, initialState);
const preloadedState = store.getState();
const html = renderToString(
<Provider store={store}>
<StaticRouter location={req.url}>
<App />
</StaticRouter>
</Provider>
);
res.send(setResponse(html, preloadedState, req.hashManifest));
};
app.get('*', renderApp);
app.listen(port, (err) => {
if(err) console.error(err)
else console.log(`Server running on port ${port}`);
});
if(err) console.error(err);
else console.log(`Server running on port ${port}`);
});

128
src/webpack.config.dev.js
View File

@ -3,68 +3,70 @@ 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');
module.exports = {
entry: ['webpack-hot-middleware/client?path=/reload_wss&timeout=2000&overlay=false&reload=true', './frontend/index.js'],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'assets/app.js',
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'@components': path.resolve(__dirname, 'frontend/components/'),
'@styles': path.resolve(__dirname, 'frontend/styles/'),
}
},
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { plugins: ['react-refresh/babel'] }
},
},
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ReactRefreshWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'assets/app.css',
}),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
}),
],
optimization: {
splitChunks: {
chunks: 'async',
cacheGroups: {
vendors: {
name: 'vendors',
chunks: 'all',
reuseExistingChunk: true,
priority: 1,
filename: 'assets/vendor.js',
enforce: true,
test (module, chunks){
const name = module.nameForCondition && module.nameForCondition();
return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
},
},
},
},
},
}
entry: ['webpack-hot-middleware/client?path=/reload_wss&timeout=2000&overlay=false&reload=true', './frontend/index.js'],
output: {
path: path.resolve(__dirname, 'build'),
filename: 'assets/app.js',
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'@components': path.resolve(__dirname, 'frontend/components/'),
'@styles': path.resolve(__dirname, 'frontend/styles/'),
}
},
mode: 'development',
module: {
rules: [
{
test: /\.(js|jsx|tsx)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: { plugins: ['react-refresh/babel'] }
},
},
{
test: /\.(css|sass|scss)$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
]
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ReactRefreshWebpackPlugin(),
new MiniCssExtractPlugin({
filename: 'assets/app.css',
}),
new ESLintPlugin(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
}),
],
optimization: {
splitChunks: {
chunks: 'async',
cacheGroups: {
vendors: {
name: 'vendors',
chunks: 'all',
reuseExistingChunk: true,
priority: 1,
filename: 'assets/vendor.js',
enforce: true,
test (module, chunks){
const name = module.nameForCondition && module.nameForCondition();
return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
},
},
},
},
},
};

150
src/webpack.config.js
View File

@ -7,79 +7,81 @@ 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');
module.exports = {
entry: './frontend/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'assets/app-[fullhash].js',
publicPath: '/',
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'@components': path.resolve(__dirname, 'frontend/components/'),
'@styles': path.resolve(__dirname, 'frontend/styles/'),
}
},
mode: 'production',
module: {
rules: [
{
test: /\.(js|jsx|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(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
}),
],
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin(),
],
splitChunks: {
chunks: 'async',
cacheGroups: {
vendors: {
name: 'vendors',
chunks: 'all',
reuseExistingChunk: true,
priority: 1,
filename: 'assets/vendor-[fullhash].js',
enforce: true,
test (module, chunks){
const name = module.nameForCondition && module.nameForCondition();
return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
},
},
},
},
},
}
entry: './frontend/index.js',
output: {
path: path.resolve(__dirname, 'build'),
filename: 'assets/app-[fullhash].js',
publicPath: '/',
},
resolve: {
extensions: ['.js', '.jsx'],
alias: {
'@components': path.resolve(__dirname, 'frontend/components/'),
'@styles': path.resolve(__dirname, 'frontend/styles/'),
}
},
mode: 'production',
module: {
rules: [
{
test: /\.(js|jsx|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(),
new ESLintPlugin(),
new webpack.DefinePlugin({
'process.env': JSON.stringify(dotenv.parsed),
}),
],
optimization: {
minimize: true,
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin(),
],
splitChunks: {
chunks: 'async',
cacheGroups: {
vendors: {
name: 'vendors',
chunks: 'all',
reuseExistingChunk: true,
priority: 1,
filename: 'assets/vendor-[fullhash].js',
enforce: true,
test (module, chunks){
const name = module.nameForCondition && module.nameForCondition();
return chunks.name !== 'vendors' && /[\\/]node_modules[\\/]/.test(name);
},
},
},
},
},
};