mirror of
				https://github.com/aleleba/create-react-ssr.git
				synced 2025-11-03 23:46:50 -06:00 
			
		
		
		
	Compare commits
	
		
			7 Commits
		
	
	
		
			d0f4f38381
			...
			f04553d033
		
	
	| Author | SHA1 | Date | |
|---|---|---|---|
| f04553d033 | |||
| 
						
						
							
						
						da60aeea25
	
				 | 
					
					
						|||
| e9f955406f | |||
| 
						
						
							
						
						32fd90f55b
	
				 | 
					
					
						|||
| 04c03f7404 | |||
| 
						
						
							
						
						bf1a6a2996
	
				 | 
					
					
						|||
| 
						
						
							
						
						be0bb6238f
	
				 | 
					
					
						
							
								
								
									
										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.31",
 | 
			
		||||
  "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',
 | 
			
		||||
 
 | 
			
		||||
		Reference in New Issue
	
	Block a user