PR-753737: Se saca el proyecto al directorio Raíz y se actualizan dependencias.

src/__mocks__/ProviderMock.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Provider } from 'react-redux';
+import { Router } from 'react-router-dom';
+import { createMemoryHistory } from 'history';
+import initialStateReducer from '../frontend/reducers/initialState';
+import setStore from '../frontend/setStore';
+
+const ProviderMock = ({ children, initialState }) => {
+    let initialStateMock = initialStateReducer
+
+    if(initialState !== undefined){
+        initialStateMock = initialState
+    }
+
+    const history = createMemoryHistory();
+    const store = setStore({ initialState: initialStateMock });
+
+    return(
+        <Provider store={store}>
+            <Router location={history.location} navigator={history}>
+                {children}
+            </Router>
+        </Provider>
+    )
+}
+
+export default ProviderMock;

src/__mocks__/fileMock.js

@@ -0,0 +1 @@
+module.exports = ''; 

src/frontend/actions/index.ts

@@ -0,0 +1,9 @@
+import test, { TTest } from './testAction';
+
+export type TAction = TTest 
+
+const actions = {
+    test
+}
+
+export default actions

src/frontend/actions/testAction.ts

@@ -0,0 +1,25 @@
+export enum ActionTypesTest {
+    ChangeHello = 'CHANGE_HELLO'
+}
+
+export interface IChangeHello {
+    type: ActionTypesTest.ChangeHello
+    payload: IChangeHelloPayload
+}
+
+export interface IChangeHelloPayload {
+	hello: any | undefined
+}
+
+export type TTest = IChangeHello
+
+const changeHello = (payload: string) => ({
+    type: 'CREATE_USER',
+    payload
+})
+
+const actions = {
+    changeHello
+}
+
+export default actions

src/frontend/components/App.tsx

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

src/frontend/components/InitialComponent.sass

@@ -0,0 +1,29 @@
+.App
+  text-align: center
+
+.App-logo
+  height: 40vmin
+  pointer-events: none
+
+@media (prefers-reduced-motion: no-preference)
+  .App-logo
+    animation: App-logo-spin infinite 20s linear
+
+.App-header
+  min-height: 100vh
+  display: flex
+  flex-direction: column
+  align-items: center
+  justify-content: center
+  font-size: calc(10px + 2vmin)
+  color: white
+
+.App-link
+  color: #61dafb
+
+@keyframes App-logo-spin
+  from
+    transform: rotate(0deg)
+
+  to
+    transform: rotate(360deg)

src/frontend/components/InitialComponent.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import logo from '../logo.svg';
+import './InitialComponent.sass';
+import { Link } from "react-router-dom";
+
+const InitialComponent = () => (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+          Edit <code>src/frontend/InitialComponent.jsx</code> and save to reload.
+        </p>
+        <a
+          className="App-link"
+          href="https://reactjs.org"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          Learn React
+        </a>
+        <Link className="App-link" to="/other-component">Other Component</Link>
+      </header>
+    </div>
+);
+
+export default InitialComponent;

src/frontend/components/OtherComponent.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import logo from '../logo.svg';
+import './InitialComponent.sass';
+import { Link } from "react-router-dom";
+
+const OtherComponent = () => (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <p>
+            Edit src/frontend/OtherComponent.jsx and save to reload.
+        </p>
+        <Link className="App-link" to="/">Initial Component</Link>
+      </header>
+    </div>
+);
+
+export default OtherComponent;

src/frontend/components/PrincipalRoutes.tsx

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

src/frontend/components/__tests__/App.test.js

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ProviderMock from '../../../__mocks__/ProviderMock';
+import App from '../App';
+
+describe('<App/> Component', () => {
+    beforeEach(() => {
+        fetch.resetMocks();
+    });
+
+    test('Should render root <App /> Component', async () => {
+        fetch.mockResponseOnce(JSON.stringify({
+            //First Data Fetch
+            data: 'data'
+        }));
+
+        render(
+            <ProviderMock>
+                <App />
+            </ProviderMock>
+        )
+    })
+})

src/frontend/index.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { hydrateRoot } from 'react-dom/client';
+// Router
+import { BrowserRouter as Router } from 'react-router-dom';
+// Redux
+import { Provider } from 'react-redux';
+import { IInitialState } from './reducers/index';
+import setStore from './setStore';
+import { config } from '../../config';
+
+import './styles/global.sass';
+import App from './components/App';
+import serviceWorkerRegistration from '../../serviceWorkerRegistration';
+
+declare global {
+	interface Window {
+		__PRELOADED_STATE__?: IInitialState;
+	}
+}
+
+declare global {
+	interface NodeModule {
+		hot?: IHot;
+	}
+}
+
+interface IHot {
+	accept: any
+}
+
+const { env } = config;
+
+const preloadedState = window.__PRELOADED_STATE__;
+const store = setStore({ initialState: preloadedState });
+
+delete window.__PRELOADED_STATE__;
+
+const container = document.getElementById('app')!;
+
+// add "const root" to be able to rerender.
+hydrateRoot(container,
+	<Provider store={store}>
+		<Router>
+			<App />
+		</Router>
+	</Provider>,
+	// Add this comment to update later app and remove warning
+	/* { 
+        onRecoverableError: (error) => {
+          console.error("recoverable", error);
+        }
+    }, */
+);
+
+// Use root.render to update later the app
+/* root.render(
+    <Provider store={store}>
+        <Router>
+            <App />
+        </Router>
+    </Provider>
+); */
+
+if((env) && (env === 'production')){
+	serviceWorkerRegistration();
+}
+
+if(module.hot){
+	module.hot.accept();
+}

src/frontend/logo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>

src/frontend/reducers/index.ts

@@ -0,0 +1,14 @@
+import { combineReducers } from 'redux';
+import testReducer from './testReducer';
+import { IChangeHelloPayload } from '../actions/testAction';
+
+export interface IInitialState {
+	testReducer?: IChangeHelloPayload | undefined
+}
+
+const rootReducer = combineReducers({
+	// Here comes the reducers
+	testReducer
+});
+
+export default rootReducer;

src/frontend/reducers/initialState.ts

@@ -0,0 +1,2 @@
+const initialState = {};
+export default  initialState;

src/frontend/reducers/testReducer.ts

@@ -0,0 +1,20 @@
+import { TAction } from '../actions';
+
+const initialState = {
+	hello: 'world'
+};
+
+const testReducer = (state = initialState, action: TAction) => {
+	switch (action.type){
+	case 'CHANGE_HELLO': {
+		const newHello = action.payload.hello;
+		return {
+			hello: newHello
+		};
+	}
+	default:
+		return state;
+	}
+};
+
+export default testReducer;

src/frontend/setStore.ts

@@ -0,0 +1,27 @@
+// Redux
+import { createStore } from 'redux'; //, applyMiddleware
+// import { Provider } from 'react-redux';
+import { composeWithDevTools as composeWithDevToolsWeb } from 'redux-devtools-extension';
+import { config } from '../../config';
+import reducer, { IInitialState } from './reducers';
+
+
+const { env } = config;
+
+const composeEnhancers = composeWithDevToolsWeb({
+	// Specify here name, actionsBlacklist, actionsCreators and other options
+});
+
+const setStore = ({ initialState }: { initialState: IInitialState | undefined }) => {
+	const store = env === 'development' ? createStore(
+		reducer,
+		initialState,
+		composeEnhancers(),
+	) : createStore(
+		reducer,
+		initialState,
+	);
+	return store;
+};
+
+export default setStore;

src/frontend/styles/global.sass

@@ -0,0 +1,4 @@
+$base-color: #282c34
+
+body
+    background-color: $base-color

src/routes/index.js

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

src/server/getHashManifest.js

@@ -0,0 +1,13 @@
+import fs from 'fs';
+
+const getHashManifest = () => {
+	try {
+		const baseUrl = __dirname.replace(/\/server(.*)/,'');
+		const fullURL = `${baseUrl}/assets/manifest-hash.json` ;
+		return JSON.parse(fs.readFileSync(fullURL));
+	}catch(err){
+		console.error(err);
+	}
+};
+
+export default getHashManifest;

src/server/index.js

@@ -0,0 +1,44 @@
+require('dotenv').config();
+
+require('ignore-styles');
+
+//require('webpack-node-externals')();
+
+require('@babel/register')({
+	'presets': [
+		['@babel/preset-env', {'targets': {'node': 'current'}}],
+		'@babel/preset-react',
+		'@babel/preset-typescript',
+	]
+});
+
+require('asset-require-hook')({
+	extensions: [
+		// images
+		'jpg',
+		'png',
+		'svg',
+		'gif',
+		'ico',
+		// videos
+		'mp4',
+		'avi',
+		// files
+		'pdf',
+	],
+	name: '/assets/media/[name].[ext]',
+});
+
+require('asset-require-hook')({
+	extensions: [
+		// typography
+		'ttf',
+		'otf',
+		'eot',
+		'woff',
+		'woff2',
+	],
+	name: '/assets/fonts/[name].[ext]',
+});
+
+require('./server');

src/server/server.js

@@ -0,0 +1,122 @@
+//Dependencies of Server
+import express from 'express';
+import { config } from '../../config';
+import webpack from 'webpack';
+import helmet from 'helmet';
+
+//Dependencies of HotReloading
+import webpackConfig from '../../webpack.config.dev';
+import webpackDevMiddleware from 'webpack-dev-middleware';
+import webpackHotMiddleware from 'webpack-hot-middleware';
+
+//Dependencies of SSR
+import React from 'react';
+import { renderToString } from 'react-dom/server';
+//Router
+import { StaticRouter } from 'react-router-dom/server';
+import routes from '../routes';
+//Redux
+import { Provider } from 'react-redux';
+import setStore from '../frontend/setStore';
+import initialState from '../frontend/reducers/initialState';
+//Get Hashes
+import getHashManifest from './getHashManifest';
+//App
+import App from '../frontend/components/App';
+
+const { env, port } = config;
+
+const routesUrls = routes.map( route => route.path);
+
+const app = express();
+
+if(env === 'development'){
+	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,
+		}));
+}else{
+	const baseUrl = __dirname.replace(/\/server(.*)/,'');
+	const fullURL = `${baseUrl}` ;
+	app
+		.use((req, res, next) => {
+			if(!req.hashManifest) req.hashManifest = getHashManifest();
+			next();
+		})
+		.use(express.static(fullURL))
+		.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['frontend.css'] : 'assets/app.css';
+	const mainBuild = manifest ? manifest['frontend.js'] : 'assets/app.js';
+	const vendorBuild = manifest ? manifest['vendors.js'] : 'assets/vendor.js';
+	const manifestJson = manifest ? `<link rel="manifest" href="${manifest['manifest.json']}">` : '';
+
+	return(`
+    <!DOCTYPE html>
+    <html lang="es">
+        <head>
+            <meta charset="UTF-8">
+			<link rel="shortcut icon" href="favicon.ico">
+            <meta http-equiv="X-UA-Compatible" content="IE=edge">
+            <meta name="viewport" content="width=device-width, initial-scale=1.0">
+			<meta name="theme-color" content="#000000">
+			${manifestJson}
+            <link href="${mainStyles}" rel="stylesheet" type="text/css"></link>
+            <title>App</title>
+        </head>
+        <body>
+            <div id="app">${html}</div>
+            <script>
+                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
+            </script>
+            <script src="${mainBuild}" type="text/javascript"></script>
+            <script src="${vendorBuild}" type="text/javascript"></script>
+        </body>
+    </html>
+    `);
+};
+
+const renderApp = (req, res, next) => {
+	if(routesUrls.includes(req.url)){
+		const store = setStore({ 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));
+	}
+	next();
+};
+
+app
+	.get('*', renderApp);
+
+
+app.listen(port, (err) => {
+	if(err) console.error(err);
+	else console.log(`Server running on port ${port}`);
+});