TTMK/web2.0-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use Helmet with SSR

Browse Source
This commit is contained in:
Jan Tuomi
2018-08-19 14:21:23 +03:00
parent 5839d68397
commit 62b2cd2f4a
3 changed files with 21 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/index.html.ejs
-3
View File
@@ -2,9 +2,6 @@
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="Aalto-yliopiston Sähköinsinoorikillan verkkosivut">
<title>Aalto-yliopiston Sähköinsinoorikilta ry</title>
</head>
<body>
<div id="root"></div>
src/routes.tsx
+13 -4
View File
@@ -1,15 +1,24 @@
import * as React from "react";
import { Fragment } from "react";
import { Switch, Route } from "react-router-dom";
import Helmet from "react-helmet";
import FrontPage from "./pages/FrontPage";
import NotFoundPage from "./pages/NotFoundPage";
import CommonPage from "./pages/CommonPage";
import "./index.scss";
const Routes = () => (
<Switch>
<Route exact path="/" render={() => <CommonPage page={FrontPage} />} />
<Route component={NotFoundPage} />
</Switch>
<Fragment>
<Helmet>
<title>Aalto-yliopiston Sähköinsinoorikilta ry</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="description" content="Aalto-yliopiston Sähköinsinoorikillan verkkosivut" />
</Helmet>
<Switch>
<Route exact path="/" render={() => <CommonPage page={FrontPage} />} />
<Route component={NotFoundPage} />
</Switch>
</Fragment>
);
export default Routes;
src/server/index.ts
+8 -2
View File
@@ -1,4 +1,5 @@
import * as React from "react";
import Helmet from "react-helmet";
import * as express from "express";
import { renderToString } from "react-dom/server";
import * as morgan from "morgan";
@@ -13,7 +14,11 @@ const port = 3000;
const server = express();
const indexHtml = fs.readFileSync(path.resolve("./dist/index.html"), "utf-8");
const html = body => indexHtml.replace("<div id=\"root\"></div>", `<div id="root">${body}</div>`);
const html = (body, title, meta) => {
const withBody = indexHtml.replace("<div id=\"root\"></div>", `<div id="root">${body}</div>`);
const withHead = withBody.replace("<head>", `<head>${title}${meta}`);
return withHead;
};
server.use(morgan("short"));
server.use(helmet());
@@ -24,8 +29,9 @@ server.use("/js", express.static("dist/js"));
server.get("*", (req, res) => {
const result = renderToString(React.createElement(App, { url: req.url }));
const head = Helmet.rewind();
res.send(
html(result)
html(result, head.title, head.meta)
);
});