.env.example

@@ -2,7 +2,3 @@
 ENV= #Default production
 #App Port
 PORT= #Default 80
-#Host
-HOST= #Default localhost
-#Prefix URL
-PREFIX_URL= #Default ''

.github/workflows/npm-publish.yml

@@ -1,40 +0,0 @@
-name: NPM testing and publish package
-
-on:
-  push:
-    branches: [ master ]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm test
-  cypress-run-component:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      # Install NPM dependencies, cache them correctly
-      # and run all Cypress tests
-      - name: Cypress run
-        uses: cypress-io/github-action@v5 # use the explicit version number
-        with:
-          component: true
-  publish-npm:
-    needs: [ build, cypress-run-component ]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm publish --access=public
-        env:
-          NODE_AUTH_TOKEN: ${{secrets.npm_token}}

.github/workflows/npm-test.yml

@@ -1,44 +0,0 @@
-name: Testing package
-
-on:
-  pull_request:
-    branches: ['*']
-jobs:
-  test:
-    runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [16.x]
-        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
-    steps:
-    - uses: actions/checkout@v3
-    - name: Use Node.js 16
-      uses: actions/setup-node@v3
-      with:
-        node-version: 16
-        cache: 'npm'
-        registry-url: https://registry.npmjs.org/
-    - run: npm ci
-    - run: npm test
-  cypress-run-component:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      # Install NPM dependencies, cache them correctly
-      # and run all Cypress tests
-      - name: Cypress run
-        uses: cypress-io/github-action@v5 # use the explicit version number
-        with:
-          component: true
-  test-build-package:
-    needs: [ test, cypress-run-component ]
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/checkout@v3
-      - uses: actions/setup-node@v3
-        with:
-          node-version: 16
-          registry-url: https://registry.npmjs.org/
-      - run: npm ci
-      - run: npm run build:frontend

README.md

@@ -8,9 +8,9 @@ Tech(Library or Framework) | Version |
 --- | --- |
 React (Render Library) | 18.2.0
 Redux (Global State Management) | 4.2.1
-React Router DOM (Routing) | 6.17.0
-Jest (Testing) | 29.7.0
-Cypress (E2E Testing) | 13.3.1
+React Router DOM (Routing) | 6.15.0
+Jest (Testing) | 29.6.4
+Cypress (E2E Testing) | 13.1.0
 Typescript | 5.2.2
 
 ## Setup
@@ -29,33 +29,34 @@ This is an exaple of config.
 ENV= #Default production
 #App Port
 PORT= #Default 80
-#Host
-HOST= #Default localhost
+#PUBLIC URL
+PUBLIC_URL= #Default 'auto'
 #Prefix URL
 PREFIX_URL= #Default ''
+#ONLY EXACT PATH
+ONLY_EXACT_PATH= #Default false
 ```
-The default environment is production and the app port defauld is 80.
+The default environment is production, the app port defauld is 80 and the default public url is "auto", use prefix url if you want a prefix on base url, use exact path to validate if you want to have strict exact paths.
 
 ### For Development
 In the terminal run:
 ```
-npm run start-frontend:dev
-npm run start-server:dev
+npm run start:dev
 ```
 The ENV enviroment variable should be "development" and choose the port of your preference with the enviroment variable PORT.
 
 You will find the root component on:
 ```
-src/frontend/components/App.tsx
+scr/frontend/components/App.tsx
 ```
 You will find the Initial Component on:
 ```
-src/frontend/components/InitialComponent.tsx
+scr/frontend/components/InitialComponent.tsx
 ```
 
 The manage of the routes you should find on:
 ```
-src/routes
+scr/routes
 ```
 It is using "useRoutes" hook for working, more information for this here: (https://reactrouter.com/docs/en/v6/api#useroutes)
 

bin/cli.js

@@ -1,110 +0,0 @@
-#!/usr/bin/env node
-const { execSync } = require('child_process');
-var fs = require('fs');
-
-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;
-};
-
-const runCommandWithOutput = command => {
-	try{
-		return execSync(`${command}`);
-	} catch (e) {
-		console.error(`Failed to execute ${command}`, e);
-		return false;
-	}
-};
-
-const replaceTextOnFile = ({
-	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 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;
-	}
-};
-    
-const repoName = process.argv[2];
-const gitCheckoutCommand = `git clone --depth 1 https://github.com/aleleba/create-react-go-ssr ${repoName}`;
-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 installDepsCommand = `cd ${repoName} && npm install`;
-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);
-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-go-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(`cd ${repoName}`);
-console.log('Create a .env file with ENV=development(default: production), PORT=3000 (default: 80), HOST=domain.com (default: localhost), PREFIX_URL= (default: is empty)');
-console.log('Then you can run: npm start-frontend:dev');
-console.log('Then you can run: npm start-server:dev');
-
-const deleteFolders = isWin ? runCommand(deleteFoldersCommandWindows) : runCommand(deleteFoldersCommand);
-if(!deleteFolders) process.exit(-1);

config/index.ts

@@ -4,7 +4,6 @@ export const deFaultValues = {
 	PUBLIC_URL: 'auto',
 	PREFIX_URL: '',
 	ONLY_EXACT_PATH: false,
-	HOST: 'localhost',
 };
 
 export const config = {
@@ -13,7 +12,6 @@ export const config = {
 	PUBLIC_URL: process.env.PUBLIC_URL ? process.env.PUBLIC_URL : deFaultValues.PUBLIC_URL,
 	PREFIX_URL: process.env.PREFIX_URL ? process.env.PREFIX_URL : deFaultValues.PREFIX_URL,
 	ONLY_EXACT_PATH: process.env.ONLY_EXACT_PATH ? process.env.ONLY_EXACT_PATH === 'true' : deFaultValues.ONLY_EXACT_PATH,
-	HOST: process.env.HOST ? process.env.HOST : deFaultValues.HOST,
 };
 
 export default config;

cypress/e2e/App.test.ts

@@ -1,20 +0,0 @@
-describe('Initial Component Tests', () => {
-	it('Will show the Initial Component page.', () => {
-		cy.visit('/');
-    cy.get('a').contains('Other Component');
-	});
-  it('Will Redirect to Other Component page.', () => {
-		cy.visit('/');
-    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');
-	});
-	it('Will Redirect to Initial Component page.', () => {
-		cy.visit('/other-component');
-    cy.get('a').contains('Initial Component').click();
-		cy.get('a').contains('Other Component');
-	});
-});

cypress/fixtures/example.json

@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}

cypress/support/commands.ts

@@ -1,37 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }

cypress/support/component-index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <base href="/__cypress/src/" />
-    <title>Components App</title>
-  </head>
-  <body>
-    <div data-cy-root></div>
-  </body>
-</html>

cypress/support/component.ts

@@ -1,42 +0,0 @@
-// ***********************************************************
-// This example support/component.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-//Importing global styles
-import '../../src/frontend/styles/global.scss';
-
-// Import commands.js using ES2015 syntax:
-import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
-
-import { mount } from 'cypress/react18';
-
-// Augment the Cypress namespace to include type definitions for
-// your custom command.
-// Alternatively, can be defined in cypress/support/component.d.ts
-// with a <reference path="./component" /> at the top of your spec.
-declare global {
-  namespace Cypress {
-    interface Chainable {
-      mount: typeof mount
-    }
-  }
-}
-
-Cypress.Commands.add('mount', mount);
-
-// Example use:
-// cy.mount(<MyComponent />)

cypress/support/e2e.ts

@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/e2e.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands';
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@aleleba/create-react-go-ssr",
-  "version": "1.0.4",
-  "description": "Starter Kit of server side render of react with backend in go",
+  "version": "0.1.1",
+  "description": "Starter Kit of server side render of react",
   "bin": "./bin/cli.js",
+  "main": "src/server/index",
   "scripts": {
     "start": "cd build/server && ./react-server",
     "start-frontend:dev": "webpack watch --config webpack.config.ts",
     "start-server:dev": "cd src/server && go run main.go",
     "build": "webpack --config webpack.config.ts && cd src/server && go build && mkdir ../../build && cp -r ./ ../../build/server && cp -r ../routes ../../build/routes && rm -rf ./react-server",
-    "build:frontend": "webpack --config webpack.config.ts",
     "lint": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx",
     "lint:fix": "eslint ./ --ext .js --ext .ts --ext .jsx --ext .tsx --fix",
     "test": "jest",
@@ -34,9 +34,9 @@
   "author": "Alejandro Lembke Barrientos",
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/aleleba/create-react-go-ssr/issues"
+    "url": "https://github.com/aleleba/create-react-ssr/issues"
   },
-  "homepage": "https://github.com/aleleba/create-react-go-ssr#readme",
+  "homepage": "https://github.com/aleleba/create-react-ssr#readme",
   "dependencies": {
     "@babel/register": "^7.22.15",
     "dotenv": "^16.3.1",
@@ -46,11 +46,11 @@
     "ignore-styles": "^5.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-redux": "^8.1.3",
-    "react-router-dom": "^6.17.0",
+    "react-redux": "^8.1.2",
+    "react-router-dom": "^6.15.0",
     "react-router-hash-link": "^2.4.3",
     "redux": "^4.2.1",
-    "webpack": "^5.89.0",
+    "webpack": "^5.88.2",
     "webpack-manifest-plugin": "^5.0.0",
     "workbox-background-sync": "^7.0.0",
     "workbox-broadcast-update": "^7.0.0",
@@ -66,45 +66,45 @@
     "workbox-streams": "^7.0.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
+    "@babel/core": "^7.22.17",
+    "@babel/preset-env": "^7.22.15",
     "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
+    "@babel/preset-typescript": "^7.22.15",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.11",
     "@redux-devtools/extension": "^3.2.5",
-    "@testing-library/jest-dom": "^6.1.4",
+    "@testing-library/jest-dom": "^6.1.3",
     "@testing-library/react": "^14.0.0",
-    "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.5",
-    "@types/node": "^20.8.6",
-    "@types/react": "^18.2.28",
-    "@types/react-dom": "^18.2.13",
-    "@types/webpack": "^5.28.3",
-    "@types/webpack-hot-middleware": "^2.25.7",
-    "@types/webpack-node-externals": "^3.0.2",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
-    "babel-jest": "^29.7.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.5.4",
+    "@types/node": "^20.6.0",
+    "@types/react": "^18.2.21",
+    "@types/react-dom": "^18.2.7",
+    "@types/webpack": "^5.28.2",
+    "@types/webpack-hot-middleware": "^2.25.6",
+    "@types/webpack-node-externals": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "babel-jest": "^29.6.4",
     "babel-loader": "^9.1.3",
     "clean-webpack-plugin": "^4.0.0",
     "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.8.1",
     "css-minimizer-webpack-plugin": "^5.0.1",
-    "cypress": "^13.3.1",
-    "eslint": "^8.51.0",
+    "cypress": "^13.1.0",
+    "eslint": "^8.49.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-webpack-plugin": "^4.0.1",
     "file-loader": "^6.2.0",
     "html-webpack-plugin": "^5.5.3",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^29.6.4",
+    "jest-environment-jsdom": "^29.6.4",
     "jest-fetch-mock": "^3.0.3",
     "mini-css-extract-plugin": "^2.7.6",
     "react-refresh": "^0.14.0",
     "resolve-ts-aliases": "^1.0.1",
-    "sass": "^1.69.3",
+    "sass": "^1.66.1",
     "sass-loader": "^13.3.2",
     "style-loader": "^3.3.3",
     "terser-webpack-plugin": "^5.3.9",

src/frontend/components/App.tsx

@@ -3,10 +3,9 @@ import PrincipalRoutes from './PrincipalRoutes';
 import { config } from '../../../config';
 
 const App = () => {
-	const { PREFIX_URL } = config;
 	if(config.ENV === 'development') {
 		useEffect(() => {
-			const ws = new WebSocket(`wss://${config.HOST}${PREFIX_URL}/ws`);
+			const ws = new WebSocket('wss://nmr4jbx8-3000.use.devtunnels.ms/ws');
 			ws.onmessage = (event) => {
 				if (event.data === 'reload') {
 					window.location.reload();