diff --git a/demo/client/App.jsx b/demo/client/App.jsx
new file mode 100644
index 0000000..6403d05
--- /dev/null
+++ b/demo/client/App.jsx
@@ -0,0 +1,12 @@
+import { React } from '../deps.ts';
+
+export class App extends React.Component {
+
+ render() {
+ return (
+
+
Hello World
+
+ )
+ }
+}
\ No newline at end of file
diff --git a/demo/client/assets/index.html b/demo/client/assets/index.html
new file mode 100644
index 0000000..a1fb49c
--- /dev/null
+++ b/demo/client/assets/index.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+ Document
+
+
+
+
+
Hi there
+
+
+
+
+
\ No newline at end of file
diff --git a/demo/client/assets/index.js b/demo/client/assets/index.js
new file mode 100644
index 0000000..ab26577
--- /dev/null
+++ b/demo/client/assets/index.js
@@ -0,0 +1,7 @@
+import { React, ReactDOM } from '../../deps.ts';
+import { App } from '../App.jsx';
+
+ReactDOM.render(
+ React.createElement(App),
+ document.getElementById('root')
+);
\ No newline at end of file
diff --git a/demo/client/assets/style.css b/demo/client/assets/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/demo/deps.ts b/demo/deps.ts
new file mode 100644
index 0000000..5156fc4
--- /dev/null
+++ b/demo/deps.ts
@@ -0,0 +1,14 @@
+import { Application, Router, send } from "https://deno.land/x/oak/mod.ts";
+import { applyGraphQL, gql } from "https://deno.land/x/oak_graphql/mod.ts";
+import { default as React } from "https://dev.jspm.io/react@16.13.1";
+import { default as ReactDOM } from "https://dev.jspm.io/react-dom@16.13.1";
+
+export {
+ Application,
+ Router,
+ send,
+ applyGraphQL,
+ gql,
+ React,
+ ReactDOM
+};
diff --git a/demo/server/server.tsx b/demo/server/server.tsx
new file mode 100644
index 0000000..04317b1
--- /dev/null
+++ b/demo/server/server.tsx
@@ -0,0 +1,76 @@
+import { Application, Router } from "https://deno.land/x/oak@v6.0.1/mod.ts";
+import React from "https://dev.jspm.io/react@16.13.1";
+import { default as ReactDomServer } from "https://dev.jspm.io/react-dom@16.13.1/server";
+import { App } from '../client/App.jsx';
+import { applyGraphQL, gql } from "https://deno.land/x/oak_graphql/mod.ts";
+
+const app = new Application();
+const port = 8080;
+
+const router = new Router();
+
+// router.get('/', await (ctx) => {
+ // Deno.readTextFile
+// })
+
+// router.get("/", handlePage);
+
+declare global {
+ namespace JSX {
+ interface IntrinsicElements {
+ [key: string]: any;
+ }
+ }
+}
+
+function handlePage(ctx: any) {
+ try {
+ const body = (ReactDomServer as any).renderToString();
+ ctx.response.body = `
+
+
+
+
+ Document
+
+
+ ${body}
+
+ `;
+ } catch (error) {
+ console.error(error);
+ }
+}
+
+const GraphQLService = await applyGraphQL({
+ Router,
+ typeDefs: (gql as any)`
+ type Book {
+ title: String!
+ author: String!
+ description: String
+ coverPrice: Int!
+ publicationDate: String
+ publisher: String
+ id: Int!
+ }
+
+ type Query {
+ books: [Book]
+ book (id: Int): Book
+ }
+ `, // need
+ resolvers: {
+ // Query: {
+ // book
+ // }
+ } // need
+})
+
+
+app.use(GraphQLService.routes(), GraphQLService.allowedMethods());
+app.use(router.routes());
+app.use(router.allowedMethods());
+
+console.log("server is running on http://localhost:8080/");
+await app.listen({ port: port });
\ No newline at end of file