;
};
const app = new Koa();
app.use(ssrsxKoa({
development: true,
app:
}));
app.listen(3000);
```
-----
## with Client script
### create client script folder
```bash
mkdir src
mkdir src/client
```
### client script
- `[client module name].js` is a client script file.
```ts
// src/client/test.js
const onClick = (e: Event) => {
alert('from js://onClick@test');
};
export { onClick }; // need export! important!
```
### server side
- `js://` is a protocol to call client script function from ssrsx.
`js://[exported function name]@[client module name]`
```tsx
// index.tsx
import Koa from 'koa';
import { ssrsxKoa, useGlobalStyle } from '@maskedeng-tom/ssrsx';
const App = () => {
useGlobalStyle({
'.clickable': {
cursor: 'pointer',
color: 'blue',
textDecoration: 'underline',
},
});
return
Ssrsx
Run inline js
Run outside client js (src/client/test.client.js -> onClick)
;
};
const app = new Koa();
app.use(ssrsxKoa({
development: true,
clientRoot: 'src/client', // client script root
app:
}));
app.listen(3000);
```
-----
## with jQuery
This is a sample using jQuery. External libraries are loaded using requirejs. Specify the root folder of the client script in clientRoot and the path to place modules such as jQuery in requireJsRoot.
- [requirejs](https://requirejs.org/)
- [requirejs with jQuery](https://requirejs.org/docs/jquery.html)
### install jQuery and create client script folder
```bash
npm install @maskedeng-tom/ssrsx
npm install koa @types/koa
npm install jquery @types/jquery
mkdir src
mkdir src/client
```
### copy jQuery script to client script folder
```bash
cp node_modules/jquery/dist/jquery.min.js src/client
```
### client script with jQuery
```ts
// src/client/test.client.js
import $ from 'jquery';
const onClick = (e: Event) => {
const input = $('#username');
alert(input.val());
};
export { onClick };
```
### server side with jQuery
```tsx
// index.tsx
import Koa from 'koa';
import { ssrsxKoa } from '@maskedeng-tom/ssrsx';
const App = () => {
return
Ssrsx
;
};
const app = new Koa();
app.use(ssrsxKoa({
development: true,
clientRoot: 'src/client',
requireJsRoot: 'src/client', // for requirejs
requireJsPaths: { // for requirejs.config paths
'jquery': 'jquery.min', // define for jquery (cut '.js' extension)
},
app:
}));
app.listen(3000);
```
-----
## with jQuery from CDN
If you want to use a CDN, specify the same version of jQuery as the one you installed with `npm install jquery`.
```tsx
// index.tsx
...
app.use(ssrsxKoa({
development: true,
clientRoot: 'src/client',
requireJsRoot: 'src/client',
requireJsPaths: {
'jquery': 'https://code.jquery.com/jquery-3.7.1.min',
},
app:
}));
...
```
-----
## use POST method
You can get the data sent by the POST method by using the `useBody` function.
and You need to add a `body parser` to get the data sent by the POST method.
```tsx
// index.tsx
import Koa from 'koa';
import bodyParser from 'koa-bodyparser'; // add body parser
import { ssrsxKoa, Router, Routes, Route, Link, useBody } from '../';
////////////////////////////////////////////////////////////////////////////////
const LoginCheck = () => {
// post body data
const body = useBody<{username: string, password: string}>();
//
return <>
Logout
;
};
const Login = () => {
// session
const session = useSession();
// post body data
const body = useBody<{username: string, password: string}>();
// check username and password
if(body.username === 'admin' && body.password === 'admin'){
session.username = body.username;
return ;
}
// authorization failed
return ;
};
const Logout = () => {
// set session
const session = useSession();
// session clear
session.username = undefined;
// redirect to top
return ;
};
const LoginForm = () => {
// get search(query parameter) data (?message=...)
const search = useSearch<{message: string}>();
// set session
const session = useSession();
if(session.username){
// already authorized
return ;
}
// login form
return <>
Login Form
;
};
const App = () => {
return
Ssrsx
;
};
const app = new Koa();
app.keys = ['your custom secret']; // session key
app.use(session(app)); // add session
app.use(bodyParser());
app.use(ssrsxKoa({
development: true,
clientRoot: 'test/client',
app:
}));
app.listen(3000);
```
-----
## with CSP (Content Security Policy)
Setting CSP (Content Security Policy) requires allowing `ws://` to communicate with WebSocket for ssrsx HotReload (`development: true`).
Also, because inline scripts are used internally, you need to allow `'unsafe-inline'` or `'nonce-${nonce}'`.
### CSP with Koa
```tsx
// index.tsx
import helmet from 'koa-helmet';
import crypto from 'crypto';
...
if(process.env.NODE_ENV === 'production'){
app.use(helmet());
app.use((ctx, next) => {
// set nonce to state
ctx.state.nonce = crypto.randomBytes(16).toString('base64');
//
return helmet.contentSecurityPolicy({ directives: {
defaultSrc: ['\'self\'','ws'], // add 'ws'
connectSrc: ['\'self\'','ws://*:*'], // add 'ws://*:*'
scriptSrc: [
'\'self\'',
`'nonce-${ctx.state.nonce}'`, // add 'nonce-??' or 'unsafe-inline'
],
}})(ctx, next) as Koa.Middleware;
});
}
```
### CSP with express
```tsx
// index.tsx
import helmet from 'helmet';
import crypto from 'crypto';
...
if(process.env.NODE_ENV === 'production'){
app.use(helmet());
app.use((req, res, next) => {
// set nonce to locals
(res as express.Response).locals.nonce = crypto.randomBytes(16).toString('base64');
//
helmet.contentSecurityPolicy({ directives: {
defaultSrc: ['\'self\'','ws'], // add 'ws'
connectSrc: ['\'self\'','ws://*:*'], // add 'ws://*:*'
scriptSrc: [
'\'self\'',
// add 'nonce-??' or 'unsafe-inline'
(req, res) => `'nonce-${(res as express.Response).locals?.nonce}'`,
],
}})(req, res, next);
});
}
...
```
-----
## User Context
User context can be set with the `context` property of the `ssrsx(Koa or Express)` function.
The `context` function is called every time it is rendered.
You can use the `useContext` function to get the user context value.
### for Koa
```tsx
interface UserContext {
lang: string;
}
const App = () => {
const user = useContext<{UserContext}>();
return
;
};
...
app.use(ssrsxExpress({
...
context: (server): UserContext => {
return {
lang: 'en',
};
},
}));
```
-----
## async Component
In Ssrsx, you cannot perform asynchronous processing using `useState` or `useEffect` etc. , but you can create asynchronous components.
The ssrsx `context` function is called every time it is rendered, so when specifying something like a database instance, create the instance externally and specify it in the `context` function.
```tsx
import { Redis } from 'ioredis';
interface UserContext {
redis: Redis;
}
const isAuthorized = async (username: string, password: string) => {
const context = useContext();
const value = await context.redis.get(username);
return value === password;
};
// async component
const LoginCheck = async () => {
// post body data
const body = useBody<{username: string, password: string}>();
// check login
const isLogin = await isAuthorized(body.username, body.password);
if(!isLogin){
return ;
}
return <>