From 65c81cbddb5071cfa5a3eba50d3ad68fcb334b75 Mon Sep 17 00:00:00 2001 From: Shiono Yoshihide Date: Thu, 24 Oct 2019 22:55:52 +0900 Subject: [PATCH] Clone react-ssr-tsx-starter https://github.com/saltyshiomix/react-ssr-tsx-starter --- .gitignore | 5 +++++ LICENSE | 21 +++++++++++++++++++++ README.md | 21 +++++++++++++++++++++ package.json | 25 +++++++++++++++++++++++++ server/main.ts | 17 +++++++++++++++++ ssr.config.js | 3 +++ tsconfig.json | 24 ++++++++++++++++++++++++ tsconfig.server.json | 10 ++++++++++ views/_document.tsx | 21 +++++++++++++++++++++ views/index.tsx | 23 +++++++++++++++++++++++ 10 files changed, 170 insertions(+) create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 package.json create mode 100644 server/main.ts create mode 100644 ssr.config.js create mode 100644 tsconfig.json create mode 100644 tsconfig.server.json create mode 100644 views/_document.tsx create mode 100644 views/index.tsx diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..6fb48e4 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules +package-lock.json +yarn.lock +dist +.DS_Store diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..b915ca5 --- /dev/null +++ b/LICENSE @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2019 Shiono Yoshihide + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE. diff --git a/README.md b/README.md new file mode 100644 index 0000000..3c7b740 --- /dev/null +++ b/README.md @@ -0,0 +1,21 @@ +This repository is the example of [@react-ssr/express](https://npm.im/@react-ssr/express). + +## Usage + +```zsh +# installation +$ git clone https://github.com/saltyshiomix/react-ssr-tsx-starter.git +$ cd react-ssr-tsx-starter +$ yarn (or `npm install`) + +# development mode +$ yarn dev (or `npm run dev`) + +# production mode +$ yarn build (or `npm run build`) +$ yarn start (or `npm start`) +``` + +## Related + +[saltyshiomix/react-ssr](https://github.com/saltyshiomix/react-ssr) - React SSR as a view template engine diff --git a/package.json b/package.json new file mode 100644 index 0000000..3189b04 --- /dev/null +++ b/package.json @@ -0,0 +1,25 @@ +{ + "private": true, + "name": "react-ssr-tsx-starter", + "scripts": { + "dev": "tsnd --project tsconfig.server.json server/main.ts", + "build": "tsc --project tsconfig.server.json", + "start": "cross-env NODE_ENV=production node dist/main.js" + }, + "dependencies": { + "@react-ssr/core": "^0.21.18", + "@react-ssr/express": "^0.21.18", + "express": "^4.17.1", + "react": "^16.13.0", + "react-dom": "^16.13.0" + }, + "devDependencies": { + "@types/express": "^4.17.1", + "@types/node": "^12.11.6", + "@types/react": "^16.9.11", + "@types/react-dom": "^16.9.4", + "cross-env": "^7.0.2", + "ts-node-dev": "^1.0.0-pre.44", + "typescript": "^3.8.3" + } +} diff --git a/server/main.ts b/server/main.ts new file mode 100644 index 0000000..5e919e5 --- /dev/null +++ b/server/main.ts @@ -0,0 +1,17 @@ +import express, { Request, Response } from 'express'; +import register from '@react-ssr/express/register'; + +const app = express(); + +(async () => { + await register(app); + + app.get('/', (_req: Request, res: Response) => { + const user = { name: 'World' }; + res.render('index', { user }); + }); + + app.listen(3000, () => { + console.log('> Ready on http://localhost:3000'); + }); +})(); diff --git a/ssr.config.js b/ssr.config.js new file mode 100644 index 0000000..32b5698 --- /dev/null +++ b/ssr.config.js @@ -0,0 +1,3 @@ +module.exports = { + distDir: 'dist/.ssr', +}; diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..bcbf8fb --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,24 @@ +{ + "compilerOptions": { + "target": "esnext", + "module": "esnext", + "moduleResolution": "node", + "jsx": "preserve", + "lib": [ + "dom", + "dom.iterable", + "esnext" + ], + "strict": true, + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "isolatedModules": true, + "allowSyntheticDefaultImports": true, + }, + "exclude": [ + "node_modules", + "dist", + "ssr.config.js" + ] +} diff --git a/tsconfig.server.json b/tsconfig.server.json new file mode 100644 index 0000000..14aeb1b --- /dev/null +++ b/tsconfig.server.json @@ -0,0 +1,10 @@ +{ + "extends": "./tsconfig.json", + "compilerOptions": { + "module": "commonjs", + "outDir": "dist" + }, + "include": [ + "server" + ] +} diff --git a/views/_document.tsx b/views/_document.tsx new file mode 100644 index 0000000..66cfe2b --- /dev/null +++ b/views/_document.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { + Document, + Head, + Main, +} from '@react-ssr/express'; + +export default class extends Document { + render() { + return ( + + + react-ssr-tsx-starter + + +
+ + + ); + } +}; diff --git a/views/index.tsx b/views/index.tsx new file mode 100644 index 0000000..d18f879 --- /dev/null +++ b/views/index.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { Head } from '@react-ssr/express'; + +interface IndexProps { + user: any; +} + +export default (props: IndexProps) => { + const [message, setMessage] = React.useState('waiting...'); + + const onClick = () => setMessage('This is a react-ssr!'); + + return ( + + + An example of @react-ssr/express + +

Hello {props.user.name}!

+ +

Message from state: {message}

+ + ); +};