mirror of
https://github.com/aleleba/create-react-ssr.git
synced 2025-04-18 05:38:08 -06:00
Merge pull request #107 from aleleba/PR-589725
PR-589725: Updating packages, fixing redux actions and fixing linting.
This commit is contained in:
commit
04c03f7404
140
bin/cli.js
140
bin/cli.js
@ -2,62 +2,62 @@
|
||||
const { execSync } = require('child_process');
|
||||
var fs = require('fs');
|
||||
|
||||
const isWin = process.platform === "win32";
|
||||
const isWin = process.platform === 'win32';
|
||||
|
||||
const runCommand = command => {
|
||||
try{
|
||||
execSync(`${command}`, {stdio: 'inherit'});
|
||||
} catch (e) {
|
||||
console.error(`Failed to execute ${command}`, e);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
try{
|
||||
execSync(`${command}`, {stdio: 'inherit'});
|
||||
} catch (e) {
|
||||
console.error(`Failed to execute ${command}`, e);
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
|
||||
const runCommandWithOutput = command => {
|
||||
try{
|
||||
return execSync(`${command}`);
|
||||
} catch (e) {
|
||||
console.error(`Failed to execute ${command}`, e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
try{
|
||||
return execSync(`${command}`);
|
||||
} catch (e) {
|
||||
console.error(`Failed to execute ${command}`, e);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const replaceTextOnFile = ({
|
||||
file,
|
||||
textToBeReplaced,
|
||||
textReplace,
|
||||
arrOfObjectsBeReplaced
|
||||
file,
|
||||
textToBeReplaced,
|
||||
textReplace,
|
||||
arrOfObjectsBeReplaced
|
||||
}) => {
|
||||
let data
|
||||
try{
|
||||
data = fs.readFileSync(file, 'utf8');
|
||||
} catch (e) {
|
||||
console.error(`Failed to read file ${file}`, e);
|
||||
return false;
|
||||
}
|
||||
let data;
|
||||
try{
|
||||
data = fs.readFileSync(file, 'utf8');
|
||||
} catch (e) {
|
||||
console.error(`Failed to read file ${file}`, e);
|
||||
return false;
|
||||
}
|
||||
|
||||
let result
|
||||
if(arrOfObjectsBeReplaced){
|
||||
arrOfObjectsBeReplaced.forEach( obj => {
|
||||
if(result){
|
||||
result = result.replace(obj.textToBeReplaced, obj.textReplace).replace(/^\s*[\r\n]/gm, ' ');
|
||||
}else{
|
||||
result = data.replace(obj.textToBeReplaced, obj.textReplace).replace(/^\s*[\r\n]/gm, ' ');
|
||||
}
|
||||
})
|
||||
}else{
|
||||
result = data.replace(textToBeReplaced, textReplace).replace(/^\s*[\r\n]/gm, ' ');
|
||||
}
|
||||
let result;
|
||||
if(arrOfObjectsBeReplaced){
|
||||
arrOfObjectsBeReplaced.forEach( obj => {
|
||||
if(result){
|
||||
result = result.replace(obj.textToBeReplaced, obj.textReplace).replace(/^\s*[\r\n]/gm, ' ');
|
||||
}else{
|
||||
result = data.replace(obj.textToBeReplaced, obj.textReplace).replace(/^\s*[\r\n]/gm, ' ');
|
||||
}
|
||||
});
|
||||
}else{
|
||||
result = data.replace(textToBeReplaced, textReplace).replace(/^\s*[\r\n]/gm, ' ');
|
||||
}
|
||||
|
||||
try{
|
||||
console.log('text changed')
|
||||
fs.writeFileSync(file, result, 'utf8');
|
||||
} catch (e) {
|
||||
console.error(`Failed to read file ${file}`, e);
|
||||
return false;
|
||||
}
|
||||
}
|
||||
try{
|
||||
console.log('text changed');
|
||||
fs.writeFileSync(file, result, 'utf8');
|
||||
} catch (e) {
|
||||
console.error(`Failed to read file ${file}`, e);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const repoName = process.argv[2];
|
||||
const gitCheckoutCommand = `git clone --depth 1 https://github.com/aleleba/create-react-ssr ${repoName}`;
|
||||
@ -65,13 +65,13 @@ console.log(`Cloning the repository with name ${repoName}`);
|
||||
const checkedOut = runCommand(gitCheckoutCommand);
|
||||
if(!checkedOut) process.exit(-1);
|
||||
|
||||
const actualVersion = runCommandWithOutput(`cd ${repoName} && node -p "require('./package.json').version"`).toString().trim()
|
||||
const actualVersion = runCommandWithOutput(`cd ${repoName} && node -p "require('./package.json').version"`).toString().trim();
|
||||
|
||||
const installDepsCommand = `cd ${repoName} && npm i`;
|
||||
const cleanGitHistoryCommand = `cd ${repoName} && rm -rf .git && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`
|
||||
const cleanGitHistoryCommandWindows = `cd ${repoName} && rmdir .git /s /q && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`
|
||||
const deleteFoldersCommand = `cd ${repoName} && rm -rf .github && rm -rf bin`
|
||||
const deleteFoldersCommandWindows = `cd ${repoName} && rmdir .github /s /q && rmdir bin /s /q`
|
||||
const cleanGitHistoryCommand = `cd ${repoName} && rm -rf .git && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`;
|
||||
const cleanGitHistoryCommandWindows = `cd ${repoName} && rmdir .git /s /q && git init && git add --all -- ":!.github" ":!bin" && git commit -m "Initial commit"`;
|
||||
const deleteFoldersCommand = `cd ${repoName} && rm -rf .github && rm -rf bin`;
|
||||
const deleteFoldersCommandWindows = `cd ${repoName} && rmdir .github /s /q && rmdir bin /s /q`;
|
||||
|
||||
console.log(`Installing dependencies for ${repoName}`);
|
||||
const installedDeps = runCommand(installDepsCommand);
|
||||
@ -79,31 +79,31 @@ if(!installedDeps) process.exit(-1);
|
||||
|
||||
console.log(`Replacing Json data for ${repoName}`);
|
||||
replaceTextOnFile({
|
||||
file: `./${repoName}/package.json`,
|
||||
arrOfObjectsBeReplaced: [
|
||||
{
|
||||
textToBeReplaced: `"bin": "./bin/cli.js",`,
|
||||
textReplace: ``
|
||||
},
|
||||
{
|
||||
textToBeReplaced: `"version": "${actualVersion}",`,
|
||||
textReplace: `"version": "0.0.1",`
|
||||
},
|
||||
{
|
||||
textToBeReplaced: `"name": "@aleleba/create-react-ssr",`,
|
||||
textReplace: `"name": "${repoName}",`
|
||||
}
|
||||
]
|
||||
})
|
||||
file: `./${repoName}/package.json`,
|
||||
arrOfObjectsBeReplaced: [
|
||||
{
|
||||
textToBeReplaced: '"bin": "./bin/cli.js",',
|
||||
textReplace: ''
|
||||
},
|
||||
{
|
||||
textToBeReplaced: `"version": "${actualVersion}",`,
|
||||
textReplace: '"version": "0.0.1",'
|
||||
},
|
||||
{
|
||||
textToBeReplaced: '"name": "@aleleba/create-react-ssr",',
|
||||
textReplace: `"name": "${repoName}",`
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
console.log(`Cleaning History of Git for ${repoName}`);
|
||||
const cleanGitHistory = isWin ? runCommand(cleanGitHistoryCommandWindows) : runCommand(cleanGitHistoryCommand);
|
||||
if(!cleanGitHistory) process.exit(-1);
|
||||
|
||||
console.log("Congratulations! You are ready. Follow the following commands to start");
|
||||
console.log('Congratulations! You are ready. Follow the following commands to start');
|
||||
console.log(`cd ${repoName}`);
|
||||
console.log('Create a .env file with ENV=development(defauld: production), PORT=3000 (default: 80), PUBLIC_URL=your_public_url(optional)(default: "auto"), PREFIX_URL=your_prefix_url(optional)(default: ""), ONLY_EXACT_PATH=true(optional)(default: false)');
|
||||
console.log(`Then you can run: npm start:dev`);
|
||||
console.log('Then you can run: npm start:dev');
|
||||
|
||||
const deleteFolders = isWin ? runCommand(deleteFoldersCommandWindows) : runCommand(deleteFoldersCommand);
|
||||
if(!deleteFolders) process.exit(-1);
|
||||
|
@ -4,7 +4,7 @@ export const deFaultValues = {
|
||||
PUBLIC_URL: 'auto',
|
||||
PREFIX_URL: '',
|
||||
ONLY_EXACT_PATH: false,
|
||||
}
|
||||
};
|
||||
|
||||
export const config = {
|
||||
ENV: process.env.ENV ? process.env.ENV : deFaultValues.ENV,
|
||||
@ -14,4 +14,4 @@ export const config = {
|
||||
ONLY_EXACT_PATH: process.env.ONLY_EXACT_PATH ? process.env.ONLY_EXACT_PATH === 'true' : deFaultValues.ONLY_EXACT_PATH,
|
||||
};
|
||||
|
||||
export default config
|
||||
export default config;
|
||||
|
@ -1,20 +1,20 @@
|
||||
describe('Initial Component Tests', () => {
|
||||
it('Will show the Initial Component page.', () => {
|
||||
cy.visit('/');
|
||||
cy.get('a').contains('Other Component');
|
||||
cy.get('a').contains('Other Component');
|
||||
});
|
||||
it('Will Redirect to Other Component page.', () => {
|
||||
it('Will Redirect to Other Component page.', () => {
|
||||
cy.visit('/');
|
||||
cy.get('a').contains('Other Component').click();
|
||||
cy.get('a').contains('Initial Component');
|
||||
cy.get('a').contains('Other Component').click();
|
||||
cy.get('a').contains('Initial Component');
|
||||
});
|
||||
it('Will show the Other Component page.', () => {
|
||||
cy.visit('/other-component');
|
||||
cy.get('a').contains('Initial Component');
|
||||
cy.get('a').contains('Initial Component');
|
||||
});
|
||||
it('Will Redirect to Initial Component page.', () => {
|
||||
cy.visit('/other-component');
|
||||
cy.get('a').contains('Initial Component').click();
|
||||
cy.get('a').contains('Initial Component').click();
|
||||
cy.get('a').contains('Other Component');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
@ -34,4 +34,4 @@
|
||||
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
@ -22,7 +22,7 @@ import './commands';
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
|
||||
import { mount } from '@cypress/react'
|
||||
import { mount } from '@cypress/react';
|
||||
|
||||
// Augment the Cypress namespace to include type definitions for
|
||||
// your custom command.
|
||||
|
108
eslint.config.ts
108
eslint.config.ts
@ -4,52 +4,62 @@ import reactPlugin from 'eslint-plugin-react';
|
||||
import globals from 'globals';
|
||||
|
||||
export default tseslint.config(
|
||||
eslint.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
{
|
||||
files: ['**/*.{js,jsx,ts,tsx}'],
|
||||
ignores: [
|
||||
'build/',
|
||||
'webpack.config.ts',
|
||||
'webpack.config.dev.ts',
|
||||
'webpack.config.dev.server.ts',
|
||||
'webpack.cy.config.ts',
|
||||
'service-worker.ts',
|
||||
'serviceWorkerRegistration.ts'
|
||||
],
|
||||
languageOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
parser: tseslint.parser,
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true
|
||||
},
|
||||
globals: {
|
||||
...globals.browser,
|
||||
...globals.node,
|
||||
...globals.es2021
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
react: reactPlugin,
|
||||
'@typescript-eslint': tseslint.plugin
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect'
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
'indent': ['error', 'tab'],
|
||||
'linebreak-style': ['error', 'unix'],
|
||||
'quotes': ['error', 'single'],
|
||||
'semi': ['error', 'always'],
|
||||
'eol-last': ['error', 'always'],
|
||||
'@typescript-eslint/no-var-requires': 'off',
|
||||
// Include here the recommended rules for react
|
||||
...reactPlugin.configs.recommended.rules
|
||||
}
|
||||
}
|
||||
);
|
||||
{
|
||||
ignores: [
|
||||
'**/build/**',
|
||||
'**/webpack.config.ts',
|
||||
'**/webpack.config.dev.ts',
|
||||
'**/webpack.config.dev.server.ts',
|
||||
'**/webpack.cy.config.ts',
|
||||
'**/service-worker.ts',
|
||||
'**/serviceWorkerRegistration.ts',
|
||||
'node_modules/**'
|
||||
]
|
||||
},
|
||||
eslint.configs.recommended,
|
||||
...tseslint.configs.recommended,
|
||||
{
|
||||
files: ['**/*.{js,jsx,ts,tsx}'],
|
||||
languageOptions: {
|
||||
ecmaVersion: 'latest',
|
||||
sourceType: 'module',
|
||||
parser: tseslint.parser,
|
||||
parserOptions: {
|
||||
ecmaFeatures: {
|
||||
jsx: true
|
||||
},
|
||||
globals: {
|
||||
...globals.browser,
|
||||
...globals.node,
|
||||
...globals.es2021
|
||||
}
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
react: reactPlugin,
|
||||
'@typescript-eslint': tseslint.plugin
|
||||
},
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect'
|
||||
}
|
||||
},
|
||||
rules: {
|
||||
// Include here the recommended rules for react
|
||||
...reactPlugin.configs.recommended.rules,
|
||||
'indent': ['error', 'tab'],
|
||||
'linebreak-style': ['error', 'unix'],
|
||||
'quotes': ['error', 'single'],
|
||||
'semi': ['error', 'always'],
|
||||
'eol-last': ['error', 'always'],
|
||||
'@typescript-eslint/no-var-requires': 'off',
|
||||
'@typescript-eslint/no-require-imports': 'off',
|
||||
'no-undef': 'off',
|
||||
'@typescript-eslint/no-namespace': 'off',
|
||||
'@typescript-eslint/no-unused-vars': 'off',
|
||||
'@typescript-eslint/no-explicit-any': 'off',
|
||||
'@typescript-eslint/no-unused-expressions': 'off',
|
||||
|
||||
}
|
||||
}
|
||||
);
|
||||
|
1980
package-lock.json
generated
1980
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
49
package.json
49
package.json
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@aleleba/create-react-ssr",
|
||||
"version": "3.9.28",
|
||||
"version": "3.9.29",
|
||||
"description": "Starter Kit of server side render of react",
|
||||
"bin": "./bin/cli.js",
|
||||
"main": "src/server/index",
|
||||
@ -37,19 +37,19 @@
|
||||
"homepage": "https://github.com/aleleba/create-react-ssr#readme",
|
||||
"dependencies": {
|
||||
"@babel/register": "^7.25.9",
|
||||
"dotenv": "^16.4.7",
|
||||
"express": "^4.21.2",
|
||||
"dotenv": "^16.5.0",
|
||||
"express": "^5.1.0",
|
||||
"helmet": "^8.1.0",
|
||||
"history": "^5.3.0",
|
||||
"ignore-styles": "^5.0.1",
|
||||
"react": "^19.0.0",
|
||||
"react-dom": "^19.0.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react-redux": "^9.2.0",
|
||||
"react-router-dom": "^7.4.0",
|
||||
"react-router-dom": "^7.5.0",
|
||||
"react-router-hash-link": "^2.4.3",
|
||||
"redux": "^5.0.1",
|
||||
"webpack": "^5.98.0",
|
||||
"webpack-dev-server": "^5.2.0",
|
||||
"webpack": "^5.99.5",
|
||||
"webpack-dev-server": "^5.2.1",
|
||||
"webpack-manifest-plugin": "^5.0.1",
|
||||
"workbox-background-sync": "^7.3.0",
|
||||
"workbox-broadcast-update": "^7.3.0",
|
||||
@ -70,21 +70,21 @@
|
||||
"@babel/preset-react": "^7.26.3",
|
||||
"@babel/preset-typescript": "^7.27.0",
|
||||
"@cypress/react": "^9.0.1",
|
||||
"@eslint/js": "^9.23.0",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.15",
|
||||
"@eslint/js": "^9.24.0",
|
||||
"@pmmmwh/react-refresh-webpack-plugin": "^0.5.16",
|
||||
"@redux-devtools/extension": "^3.3.0",
|
||||
"@testing-library/jest-dom": "^6.6.3",
|
||||
"@testing-library/react": "^16.2.0",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/jest": "^29.5.14",
|
||||
"@types/node": "^22.13.13",
|
||||
"@types/react": "^19.0.12",
|
||||
"@types/react-dom": "^19.0.4",
|
||||
"@types/node": "^22.14.0",
|
||||
"@types/react": "^19.1.0",
|
||||
"@types/react-dom": "^19.1.2",
|
||||
"@types/webpack": "^5.28.5",
|
||||
"@types/webpack-hot-middleware": "^2.25.9",
|
||||
"@types/webpack-node-externals": "^3.0.4",
|
||||
"@typescript-eslint/eslint-plugin": "^8.28.0",
|
||||
"@typescript-eslint/parser": "^8.28.0",
|
||||
"@typescript-eslint/eslint-plugin": "^8.29.1",
|
||||
"@typescript-eslint/parser": "^8.29.1",
|
||||
"babel-jest": "^29.7.0",
|
||||
"babel-loader": "^10.0.0",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
@ -92,9 +92,9 @@
|
||||
"copy-webpack-plugin": "^13.0.0",
|
||||
"css-loader": "^7.1.2",
|
||||
"css-minimizer-webpack-plugin": "^7.0.2",
|
||||
"cypress": "^14.2.0",
|
||||
"eslint": "^9.23.0",
|
||||
"eslint-plugin-react": "^7.37.4",
|
||||
"cypress": "^14.3.0",
|
||||
"eslint": "^9.24.0",
|
||||
"eslint-plugin-react": "^7.37.5",
|
||||
"eslint-webpack-plugin": "^5.0.0",
|
||||
"file-loader": "^6.2.0",
|
||||
"globals": "^16.0.0",
|
||||
@ -103,16 +103,17 @@
|
||||
"jest": "^29.7.0",
|
||||
"jest-environment-jsdom": "^29.7.0",
|
||||
"jest-fetch-mock": "^3.0.3",
|
||||
"jiti": "^2.4.2",
|
||||
"mini-css-extract-plugin": "^2.9.2",
|
||||
"react-refresh": "^0.16.0",
|
||||
"react-refresh": "^0.17.0",
|
||||
"resolve-ts-aliases": "^1.0.1",
|
||||
"sass": "^1.86.0",
|
||||
"sass": "^1.86.3",
|
||||
"sass-loader": "^16.0.5",
|
||||
"style-loader": "^4.0.0",
|
||||
"terser-webpack-plugin": "^5.3.14",
|
||||
"ts-jest": "^29.3.0",
|
||||
"typescript": "^5.8.2",
|
||||
"typescript-eslint": "^8.28.0",
|
||||
"ts-jest": "^29.3.1",
|
||||
"typescript": "^5.8.3",
|
||||
"typescript-eslint": "^8.29.1",
|
||||
"url-loader": "^4.1.1",
|
||||
"webpack-cli": "^6.0.1",
|
||||
"webpack-dev-middleware": "^7.4.2",
|
||||
|
4
src/@types/express/index.d.ts
vendored
4
src/@types/express/index.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
import * as express from "express"
|
||||
import * as express from 'express';
|
||||
|
||||
declare global {
|
||||
namespace Express {
|
||||
@ -6,4 +6,4 @@ declare global {
|
||||
hashManifest?: Record<string,any>
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
2
src/@types/index.d.ts
vendored
2
src/@types/index.d.ts
vendored
@ -1,4 +1,4 @@
|
||||
declare module "*.svg" {
|
||||
declare module '*.svg' {
|
||||
const content: any;
|
||||
export default content;
|
||||
}
|
||||
|
@ -6,22 +6,22 @@ import initialStateReducer from '../frontend/reducers/initialState';
|
||||
import setStore from '../frontend/setStore';
|
||||
|
||||
export const ProviderMock = ({ children, initialState }: { children: any, initialState?: any}) => {
|
||||
let initialStateMock = initialStateReducer
|
||||
let initialStateMock = initialStateReducer;
|
||||
|
||||
if(initialState !== undefined){
|
||||
initialStateMock = initialState
|
||||
}
|
||||
if(initialState !== undefined){
|
||||
initialStateMock = initialState;
|
||||
}
|
||||
|
||||
const history = createMemoryHistory();
|
||||
const store = setStore({ initialState: initialStateMock });
|
||||
const history = createMemoryHistory();
|
||||
const store = setStore({ initialState: initialStateMock });
|
||||
|
||||
return(
|
||||
<Provider store={store}>
|
||||
<Router location={history.location} navigator={history}>
|
||||
{children}
|
||||
</Router>
|
||||
</Provider>
|
||||
)
|
||||
}
|
||||
return(
|
||||
<Provider store={store}>
|
||||
<Router location={history.location} navigator={history}>
|
||||
{children}
|
||||
</Router>
|
||||
</Provider>
|
||||
);
|
||||
};
|
||||
|
||||
export default ProviderMock;
|
||||
|
@ -1,9 +1 @@
|
||||
import test, { TTest } from './testAction';
|
||||
|
||||
export type TAction = TTest
|
||||
|
||||
const actions = {
|
||||
test
|
||||
}
|
||||
|
||||
export default actions
|
||||
export * from '@actions/testAction';
|
||||
|
@ -14,12 +14,12 @@ export interface IChangeHelloPayload {
|
||||
export type TTest = IChangeHello
|
||||
|
||||
const changeHello = (payload: string) => ({
|
||||
type: ActionTypesTest.ChangeHello,
|
||||
payload
|
||||
})
|
||||
type: ActionTypesTest.ChangeHello,
|
||||
payload
|
||||
});
|
||||
|
||||
const actions = {
|
||||
changeHello
|
||||
}
|
||||
changeHello
|
||||
};
|
||||
|
||||
export default actions
|
||||
export default actions;
|
||||
|
@ -1,18 +1,18 @@
|
||||
import React from 'react';
|
||||
import logo from '../logo.svg';
|
||||
import './InitialComponent.scss';
|
||||
import { Link } from "react-router-dom";
|
||||
import { Link } from 'react-router-dom';
|
||||
|
||||
const OtherComponent = () => (
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src="assets/img/logo.svg" className="App-logo" alt="logo" />
|
||||
<p>
|
||||
<div className="App">
|
||||
<header className="App-header">
|
||||
<img src="assets/img/logo.svg" className="App-logo" alt="logo" />
|
||||
<p>
|
||||
Edit <code>src/frontend/OtherComponent.jsx</code> and save to reload.
|
||||
</p>
|
||||
<Link className="App-link" to="/">Initial Component</Link>
|
||||
</header>
|
||||
</div>
|
||||
</p>
|
||||
<Link className="App-link" to="/">Initial Component</Link>
|
||||
</header>
|
||||
</div>
|
||||
);
|
||||
|
||||
export default OtherComponent;
|
||||
|
@ -4,7 +4,7 @@ import { useRoutes } from 'react-router-dom';
|
||||
import routes from '../../routes';
|
||||
|
||||
const PrincipalRoutes = () => {
|
||||
let element = useRoutes(routes);
|
||||
const element = useRoutes(routes);
|
||||
return element;
|
||||
};
|
||||
|
||||
|
@ -4,20 +4,20 @@ import { ProviderMock } from '@mocks';
|
||||
import App from '@components/App';
|
||||
|
||||
describe('<App/> Component', () => {
|
||||
beforeEach(() => {
|
||||
fetchMock.resetMocks();
|
||||
});
|
||||
beforeEach(() => {
|
||||
fetchMock.resetMocks();
|
||||
});
|
||||
|
||||
it('Should render root <App /> Component', async () => {
|
||||
fetchMock.mockResponseOnce(JSON.stringify({
|
||||
//First Data Fetch
|
||||
data: 'data'
|
||||
}));
|
||||
it('Should render root <App /> Component', async () => {
|
||||
fetchMock.mockResponseOnce(JSON.stringify({
|
||||
//First Data Fetch
|
||||
data: 'data'
|
||||
}));
|
||||
|
||||
render(
|
||||
<ProviderMock>
|
||||
<App />
|
||||
</ProviderMock>
|
||||
)
|
||||
})
|
||||
})
|
||||
render(
|
||||
<ProviderMock>
|
||||
<App />
|
||||
</ProviderMock>
|
||||
);
|
||||
});
|
||||
});
|
||||
|
@ -1,10 +1,6 @@
|
||||
import { combineReducers } from 'redux';
|
||||
import testReducer from './testReducer';
|
||||
import { IChangeHelloPayload } from '../actions/testAction';
|
||||
|
||||
export interface IInitialState {
|
||||
testReducer?: IChangeHelloPayload | undefined
|
||||
}
|
||||
export * from './initialState';
|
||||
|
||||
const rootReducer = combineReducers({
|
||||
// Here comes the reducers
|
||||
|
@ -1,3 +1,6 @@
|
||||
import { IInitialState } from './';
|
||||
import { IChangeHelloPayload } from '@actions';
|
||||
export interface IInitialState {
|
||||
testReducer?: IChangeHelloPayload | undefined
|
||||
}
|
||||
const initialState: IInitialState = {};
|
||||
export default initialState;
|
||||
|
@ -1,10 +1,10 @@
|
||||
import { TAction } from '../actions';
|
||||
import { TTest } from '@actions';
|
||||
|
||||
const initialState = {
|
||||
hello: 'world'
|
||||
};
|
||||
|
||||
const testReducer = (state = initialState, action: TAction) => {
|
||||
const testReducer = (state = initialState, action: TTest) => {
|
||||
switch (action.type){
|
||||
case 'CHANGE_HELLO': {
|
||||
const newHello = action.payload.hello;
|
||||
|
@ -3,8 +3,7 @@ import { legacy_createStore as 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';
|
||||
|
||||
import reducer, { IInitialState } from '@reducers';
|
||||
|
||||
const { ENV } = config;
|
||||
|
||||
@ -15,11 +14,11 @@ const composeEnhancers = composeWithDevToolsWeb({
|
||||
const setStore = ({ initialState }: { initialState: IInitialState | undefined }) => {
|
||||
const store = ENV === 'development' ? createStore(
|
||||
reducer,
|
||||
initialState,
|
||||
initialState as any,
|
||||
composeEnhancers(),
|
||||
) : createStore(
|
||||
reducer,
|
||||
initialState,
|
||||
initialState as any,
|
||||
);
|
||||
return store;
|
||||
};
|
||||
|
@ -129,7 +129,7 @@ const renderApp = (req, res, next) => {
|
||||
};
|
||||
|
||||
app
|
||||
.get('*', renderApp);
|
||||
.get('/{*splat}', renderApp);
|
||||
|
||||
app.listen(PORT, () => {
|
||||
console.log(`Server running on port ${PORT}`);
|
||||
|
@ -49,7 +49,16 @@ const config: Configuration = {
|
||||
'options': {
|
||||
modules: {
|
||||
auto: /\.module\.\w+$/i,
|
||||
}
|
||||
},
|
||||
url: {
|
||||
filter: (url) => {
|
||||
// No procesar URLs absolutas que comienzan con /
|
||||
if (url.startsWith('/')) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
'sass-loader',
|
||||
|
@ -35,6 +35,12 @@ if(fs.existsSync(`${ROOT_DIR}/../public/img`)){
|
||||
});
|
||||
}
|
||||
|
||||
if(fs.existsSync(`${ROOT_DIR}/../public/fonts`)){
|
||||
copyPatterns.push({
|
||||
from: `${ROOT_DIR}/../public/fonts`, to: 'assets/fonts',
|
||||
});
|
||||
}
|
||||
|
||||
const config: Configuration = {
|
||||
entry: [`webpack-hot-middleware/client?path=${envConfig.PREFIX_URL}/reload_wss&timeout=2000&reload=true&autoConnect=true`, `${ROOT_DIR}/../src/frontend/index.tsx`],
|
||||
output: {
|
||||
@ -68,7 +74,16 @@ const config: Configuration = {
|
||||
'options': {
|
||||
modules: {
|
||||
auto: /\.module\.\w+$/i,
|
||||
}
|
||||
},
|
||||
url: {
|
||||
filter: (url) => {
|
||||
// No procesar URLs absolutas que comienzan con /
|
||||
if (url.startsWith('/')) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
'sass-loader',
|
||||
|
@ -41,6 +41,12 @@ if(fs.existsSync(`${ROOT_DIR}/public/img`)){
|
||||
});
|
||||
}
|
||||
|
||||
if(fs.existsSync(`${ROOT_DIR}/public/fonts`)){
|
||||
copyPatterns.push({
|
||||
from: `${ROOT_DIR}/public/fonts`, to: 'assets/fonts',
|
||||
});
|
||||
}
|
||||
|
||||
const frontendConfig = {
|
||||
entry: {
|
||||
frontend: `${ROOT_DIR}/src/frontend/index.tsx`,
|
||||
@ -73,7 +79,16 @@ const frontendConfig = {
|
||||
'options': {
|
||||
modules: {
|
||||
auto: /\.module\.\w+$/i,
|
||||
}
|
||||
},
|
||||
url: {
|
||||
filter: (url) => {
|
||||
// No procesar URLs absolutas que comienzan con /
|
||||
if (url.startsWith('/')) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
'sass-loader',
|
||||
|
@ -23,6 +23,12 @@ if(fs.existsSync(copyFromUrl)){
|
||||
});
|
||||
}
|
||||
|
||||
if(fs.existsSync(`${path.resolve(__dirname)}/public/fonts`)){
|
||||
copyPatterns.push({
|
||||
from: `${path.resolve(__dirname)}/public/fonts`, to: 'assets/fonts',
|
||||
});
|
||||
}
|
||||
|
||||
export default {
|
||||
entry: './src/frontend/components/index.tsx',
|
||||
resolve: {
|
||||
@ -71,7 +77,16 @@ export default {
|
||||
'options': {
|
||||
modules: {
|
||||
auto: /\.module\.\w+$/i,
|
||||
}
|
||||
},
|
||||
url: {
|
||||
filter: (url) => {
|
||||
// No procesar URLs absolutas que comienzan con /
|
||||
if (url.startsWith('/')) {
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
'sass-loader',
|
||||
|
Loading…
Reference in New Issue
Block a user