Server side routing works 🎉

bin/main.re

@@ -1,3 +1,4 @@
+[@alert "-all--all+deprecated"];
 module Page = {
   [@react.component]
   let make = (~scripts=[], ~appHTMLString) => {
@@ -29,21 +30,44 @@ module Page = {
   };
 };
 
-let hello_route_handler = _request => {
+let renderPage = reactElement => {
   let appHTMLString =
-    ReactDOM.renderToString(<Reason_india_website_native.App />);
+    ReactDOM.renderToString(reactElement);
+  ReactDOM.renderToString(
+    <Page scripts=["/static/app.js"] appHTMLString />,
+  );
+}
+
+
+
+
+let hello_route_handler = request => {
+  let target = request
+  |> Dream.path
+  |> List.filter(p => !String.equal("", p))
+  |> String.concat("/");
+
+  print_endline("---------------");
+  print_endline(target);
+
+  let reactElement = 
+    switch (Routes.match'(Reason_india_website_native.AppRouter.routes, ~target)) {
+    | Routes.FullMatch(e) => e()
+    | Routes.MatchWithTrailingSlash(e) => e()
+    | Routes.NoMatch => <p> {React.string("404")} </p>
+    };
+
   Dream.html(
-    ReactDOM.renderToString(
-      <Page scripts=["/static/app.js"] appHTMLString />,
-    ),
+    renderPage(reactElement)
   );
 };
 
-let hello_route: Dream.route = Dream.get("/", hello_route_handler);
 let statics_route: Dream.route =
   Dream.get("/static/**", Dream.static("./static"));
 
-let handler = Dream.router([hello_route, statics_route]);
+let hello_route: Dream.route = Dream.get("/**", hello_route_handler);
+
+let handler = Dream.router([statics_route, hello_route]);
 
 // request => promise(response)
 Dream.run(~port=8000, ~interface="localhost", handler);

client/app.re

@@ -1,25 +1,10 @@
-let home = () => Routes.(nil); // '/'
-let hello = () => Routes.(s("hello") /? nil); // /hello
-
-let homeRoute = Routes.(home() @--> (() => {
-  print_endline("in home page");
-  <Reason_india_website_js.App />;
-}));
-
-let helloRoute = Routes.(hello() @--> (() => {
-  print_endline("in hello view");
-  <p> {React.string("In Hello")} </p>
-}));
-
-let routes = Routes.one_of([homeRoute, helloRoute]);
-
 module Main = {
   [@react.component]
     let make = () => {
       let target =
         ReasonReactRouter.useUrl().path
-      |> String.concat("/");
-      switch (Routes.match'(routes, ~target)) {
+     |> String.concat("/");
+      switch (Routes.match'(Reason_india_website_js.AppRouter.routes, ~target)) {
       | Routes.FullMatch(e) => e()
       | Routes.MatchWithTrailingSlash(e) => e()
       | Routes.NoMatch => <p> {React.string("404")} </p>

lib/js/dune

@@ -1,7 +1,7 @@
 (library
  (name reason_india_website_js)
  (modes melange)
- (libraries styled-ppx.css styled-ppx.emotion melange reason-react)
+ (libraries routes styled-ppx.css styled-ppx.emotion melange reason-react)
  (preprocess
   (pps
     server-reason-react.browser_ppx -js

lib/native/AppRouter.re

@@ -0,0 +1,14 @@
+let home = () => Routes.(nil); // '/'
+let hello = () => Routes.(s("hello") /? nil); // /hello
+
+let homeRoute = Routes.(home() @--> (() => {
+  print_endline("in home page");
+  <App />;
+}));
+
+let helloRoute = Routes.(hello() @--> (() => {
+  print_endline("in hello view");
+  <p> {React.string("In Hello")} </p>
+}));
+
+let routes = Routes.one_of([homeRoute, helloRoute]);

lib/native/dune

@@ -3,9 +3,10 @@
  (libraries
    styled-ppx.emotion_native
    styled-ppx.css_native
-   routes
    server-reason-react.react
-   server-reason-react.reactDom)
+   server-reason-react.reactDom
+   routes
+ )
  (preprocess
   (pps styled-ppx --native
        server-reason-react.browser_ppx