diff --git a/.github/workflows/npm-publish.yml b/.github/workflows/npm-publish.yml new file mode 100644 index 0000000..4f2a7c0 --- /dev/null +++ b/.github/workflows/npm-publish.yml @@ -0,0 +1,40 @@ +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}} \ No newline at end of file diff --git a/.github/workflows/npm-test.yml b/.github/workflows/npm-test.yml new file mode 100644 index 0000000..a35f593 --- /dev/null +++ b/.github/workflows/npm-test.yml @@ -0,0 +1,44 @@ +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 \ No newline at end of file diff --git a/README.md b/README.md index 2089f22..44b5d90 100644 --- a/README.md +++ b/README.md @@ -29,34 +29,29 @@ This is an exaple of config. ENV= #Default production #App Port PORT= #Default 80 -#PUBLIC URL -PUBLIC_URL= #Default 'auto' -#Prefix URL -PREFIX_URL= #Default '' -#ONLY EXACT PATH -ONLY_EXACT_PATH= #Default false ``` -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. +The default environment is production and the app port defauld is 80. ### For Development In the terminal run: ``` -npm run start:dev +npm run start-frontend: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. You will find the root component on: ``` -scr/frontend/components/App.tsx +src/frontend/components/App.tsx ``` You will find the Initial Component on: ``` -scr/frontend/components/InitialComponent.tsx +src/frontend/components/InitialComponent.tsx ``` The manage of the routes you should find on: ``` -scr/routes +src/routes ``` It is using "useRoutes" hook for working, more information for this here: (https://reactrouter.com/docs/en/v6/api#useroutes) diff --git a/bin/cli.js b/bin/cli.js new file mode 100644 index 0000000..36caaef --- /dev/null +++ b/bin/cli.js @@ -0,0 +1,110 @@ +#!/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(defauld: production), PORT=3000 (default: 80)'); +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); diff --git a/cypress/e2e/App.test.ts b/cypress/e2e/App.test.ts new file mode 100644 index 0000000..d558736 --- /dev/null +++ b/cypress/e2e/App.test.ts @@ -0,0 +1,20 @@ +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'); + }); +}); \ No newline at end of file diff --git a/cypress/fixtures/example.json b/cypress/fixtures/example.json new file mode 100644 index 0000000..02e4254 --- /dev/null +++ b/cypress/fixtures/example.json @@ -0,0 +1,5 @@ +{ + "name": "Using fixtures to represent data", + "email": "hello@cypress.io", + "body": "Fixtures are a great way to mock data for responses to routes" +} diff --git a/cypress/support/commands.ts b/cypress/support/commands.ts new file mode 100644 index 0000000..698b01a --- /dev/null +++ b/cypress/support/commands.ts @@ -0,0 +1,37 @@ +/// +// *********************************************** +// 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 +// drag(subject: string, options?: Partial): Chainable +// dismiss(subject: string, options?: Partial): Chainable +// visit(originalFn: CommandOriginalFn, url: string, options: Partial): Chainable +// } +// } +// } \ No newline at end of file diff --git a/cypress/support/component-index.html b/cypress/support/component-index.html new file mode 100644 index 0000000..f87366e --- /dev/null +++ b/cypress/support/component-index.html @@ -0,0 +1,13 @@ + + + + + + + + Components App + + +
+ + \ No newline at end of file diff --git a/cypress/support/component.ts b/cypress/support/component.ts new file mode 100644 index 0000000..00ae19b --- /dev/null +++ b/cypress/support/component.ts @@ -0,0 +1,42 @@ +// *********************************************************** +// 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 at the top of your spec. +declare global { + namespace Cypress { + interface Chainable { + mount: typeof mount + } + } +} + +Cypress.Commands.add('mount', mount); + +// Example use: +// cy.mount() diff --git a/cypress/support/e2e.ts b/cypress/support/e2e.ts new file mode 100644 index 0000000..598ab5f --- /dev/null +++ b/cypress/support/e2e.ts @@ -0,0 +1,20 @@ +// *********************************************************** +// 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') diff --git a/package.json b/package.json index 924c999..4215985 100644 --- a/package.json +++ b/package.json @@ -1,14 +1,14 @@ { "name": "@aleleba/create-react-go-ssr", - "version": "0.1.1", - "description": "Starter Kit of server side render of react", + "version": "1.0.0", + "description": "Starter Kit of server side render of react with backend in go", "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-ssr/issues" + "url": "https://github.com/aleleba/create-react-go-ssr/issues" }, - "homepage": "https://github.com/aleleba/create-react-ssr#readme", + "homepage": "https://github.com/aleleba/create-react-go-ssr#readme", "dependencies": { "@babel/register": "^7.22.15", "dotenv": "^16.3.1",