-
Notifications
You must be signed in to change notification settings - Fork 0
/
server.tsx
59 lines (53 loc) · 1.92 KB
/
server.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
// Importing Modules
import {
Application,
upload,
Router,
React,
ReactDOMServer
} from "./src/deps.ts";
// React Components
import App from "./src/app.tsx";
import SimpleReactFileUploader from './src/SimpleReactFileUploader.component.tsx';
//global constants
const app = new Application();
const router = new Router();
//Adding a route for js code to use i the browser
const browserBundlePath = "/browser.js";
//js for client side React - the React components are stored as client side consts
const js =
`import React from "https://dev.jspm.io/[email protected]";
import ReactDOM from "https://dev.jspm.io/[email protected]";
const App = ${App};
const SimpleReactFileUploader = ${SimpleReactFileUploader};
ReactDOM.hydrate(React.createElement(App), document.body);`;
//the js code is loaded from a script tag
const html =
`<html>
<head>
<script type="module" src="${browserBundlePath}"></script>
<style>* { font-family: Helvetica; }</style>
</head>
<body>${(ReactDOMServer as any).renderToString(<App />)}</body>
</html>`;
//setting the routes
router.get(browserBundlePath, (ctx) => { //the js code that is loaded from script tag
ctx.response.type ="application/javascript"
ctx.response.body = js;
})
.post("/upload", upload('uploads', ['jpg','png'], 20000000, 10000000, true, false, true), //using oak upload middleware
async (context: any, next: any) => {
//return the uploadedFiles data to the response
context.response.body = context.uploadedFiles;
console.log(context.uploadedFiles)
})
.get("/", (ctx) => { //default route
ctx.response.type = "text/html";
ctx.response.body = html;
});
// Passing Router as middleware
app.use(router.routes());
app.use(router.allowedMethods());
//start server
console.log("React SSR App listening on port 3000");
await app.listen({ port: 3000 });