aleleba/create-react-go-ssr
1
0
Fork 0
mirror of https://github.com/aleleba/create-react-go-ssr.git synced 2025-04-20 02:07:48 -06:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: aleleba:master
Branches Tags
aleleba:master
aleleba:0.1.1
aleleba:0.1.0
aleleba:0.0.1
..
compare: aleleba:0.1.1
Branches Tags
aleleba:master
aleleba:0.1.1
aleleba:0.1.0
aleleba:0.0.1

No commits in common. "master" and "0.1.1" have entirely different histories.
master ... 0.1.1

15 changed files with 706 additions and 1420 deletions
Show Stats Expand all files Collapse all files

6
.env.example
View File

@ -1,8 +1,4 @@
#Environment #Environment
ENV= #Default production ENV= #Default production
#App Port #App Port
PORT= #Default 80 PORT= #Default 80
#Host
HOST= #Default localhost
#Prefix URL
PREFIX_URL= #Default ''

40
.github/workflows/npm-publish.yml vendored
View File

@ -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}}

44
.github/workflows/npm-test.yml vendored
View File

@ -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

23
README.md
View File

@ -8,9 +8,9 @@ Tech(Library or Framework) | Version |
--- | --- | --- | --- |
React (Render Library) | 18.2.0 React (Render Library) | 18.2.0
Redux (Global State Management) | 4.2.1 Redux (Global State Management) | 4.2.1
React Router DOM (Routing) | 6.17.0 React Router DOM (Routing) | 6.15.0
Jest (Testing) | 29.7.0 Jest (Testing) | 29.6.4
Cypress (E2E Testing) | 13.3.1 Cypress (E2E Testing) | 13.1.0
Typescript | 5.2.2 Typescript | 5.2.2
## Setup ## Setup
@ -29,33 +29,34 @@ This is an exaple of config.
ENV= #Default production ENV= #Default production
#App Port #App Port
PORT= #Default 80 PORT= #Default 80
#Host #PUBLIC URL
HOST= #Default localhost PUBLIC_URL= #Default 'auto'
#Prefix URL #Prefix URL
PREFIX_URL= #Default '' 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 ### For Development
In the terminal run: In the terminal run:
``` ```
npm run start-frontend:dev npm run start:dev
npm run start-server:dev
``` ```
The ENV enviroment variable should be "development" and choose the port of your preference with the enviroment variable PORT. 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: You will find the root component on:
``` ```
src/frontend/components/App.tsx scr/frontend/components/App.tsx
``` ```
You will find the Initial Component on: 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: 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) It is using "useRoutes" hook for working, more information for this here: (https://reactrouter.com/docs/en/v6/api#useroutes)

110
bin/cli.js
View File

@ -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);

2
config/index.ts
View File

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

20
cypress/e2e/App.test.ts
View File

@ -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');
});
});

5
cypress/fixtures/example.json
View File

@ -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"
}

37
cypress/support/commands.ts
View File

@ -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>
// }
// }
// }

13
cypress/support/component-index.html
View File

@ -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>

42
cypress/support/component.ts
View File

@ -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 />)

20
cypress/support/e2e.ts
View File

@ -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')

1705
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

56
package.json
View File

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

3
src/frontend/components/App.tsx
View File

@ -3,10 +3,9 @@ import PrincipalRoutes from './PrincipalRoutes';
import { config } from '../../../config'; import { config } from '../../../config';
const App = () => { const App = () => {
const { PREFIX_URL } = config;
if(config.ENV === 'development') { if(config.ENV === 'development') {
useEffect(() => { 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) => { ws.onmessage = (event) => {
if (event.data === 'reload') { if (event.data === 'reload') {
window.location.reload(); window.location.reload();