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