Shiono Yoshihide
commit
65c81cbddb
@ -0,0 +1,5 @@
|
|||||||
|
node_modules
|
||||||
|
package-lock.json
|
||||||
|
yarn.lock
|
||||||
|
dist
|
||||||
|
.DS_Store
|
||||||
@ -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.
|
||||||
@ -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
|
||||||
@ -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"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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');
|
||||||
|
});
|
||||||
|
})();
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
module.exports = {
|
||||||
|
distDir: 'dist/.ssr',
|
||||||
|
};
|
||||||
@ -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"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
{
|
||||||
|
"extends": "./tsconfig.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"module": "commonjs",
|
||||||
|
"outDir": "dist"
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"server"
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,21 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import {
|
||||||
|
Document,
|
||||||
|
Head,
|
||||||
|
Main,
|
||||||
|
} from '@react-ssr/express';
|
||||||
|
|
||||||
|
export default class extends Document {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<html lang="en">
|
||||||
|
<Head>
|
||||||
|
<title>react-ssr-tsx-starter</title>
|
||||||
|
</Head>
|
||||||
|
<body>
|
||||||
|
<Main />
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -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 (
|
||||||
|
<React.Fragment>
|
||||||
|
<Head>
|
||||||
|
<title>An example of @react-ssr/express</title>
|
||||||
|
</Head>
|
||||||
|
<p>Hello {props.user.name}!</p>
|
||||||
|
<button onClick={onClick}>Click Me</button>
|
||||||
|
<p>Message from state: {message}</p>
|
||||||
|
</React.Fragment>
|
||||||
|
);
|
||||||
|
};
|
||||||
Loading…
Reference in new issue