-
Notifications
You must be signed in to change notification settings - Fork 11
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Erdoğan Bulut
committed
Sep 4, 2022
1 parent
a0ea8bf
commit 9d90d33
Showing
6 changed files
with
474 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,64 @@ | ||
import fs from 'fs'; | ||
import path from 'path'; | ||
import { fileURLToPath } from 'url'; | ||
import express from 'express'; | ||
import { createServer as createViteServer } from 'vite'; | ||
|
||
const __dirname = path.dirname(fileURLToPath(import.meta.url)); | ||
|
||
async function createServer() { | ||
const app = express(); | ||
|
||
// Create Vite server in middleware mode and configure the app type as | ||
// 'custom', disabling Vite's own HTML serving logic so parent server | ||
// can take control | ||
const vite = await createViteServer({ | ||
server: { middlewareMode: true }, | ||
appType: 'custom', | ||
}); | ||
|
||
// use vite's connect instance as middleware | ||
// if you use your own express router (express.Router()), you should use router.use | ||
app.use(vite.middlewares); | ||
|
||
app.use('*', async (req, res, next) => { | ||
const url = req.originalUrl; | ||
|
||
try { | ||
// 1. Read index.html | ||
let template = fs.readFileSync(path.resolve(__dirname, 'index.html'), 'utf-8'); | ||
|
||
// 2. Apply Vite HTML transforms. This injects the Vite HMR client, and | ||
// also applies HTML transforms from Vite plugins, e.g. global preambles | ||
// from @vitejs/plugin-react | ||
template = await vite.transformIndexHtml(url, template); | ||
|
||
// 3. Load the server entry. vite.ssrLoadModule automatically transforms | ||
// your ESM source code to be usable in Node.js! There is no bundling | ||
// required, and provides efficient invalidation similar to HMR. | ||
const { render } = await vite.ssrLoadModule('/src/entry-server.tsx'); | ||
|
||
// 4. render the app HTML. This assumes entry-server.js's exported `render` | ||
// function calls appropriate framework SSR APIs, | ||
// e.g. ReactDOMServer.renderToString() | ||
const appHtml = await render(url); | ||
|
||
// 5. Inject the app-rendered HTML into the template. | ||
const html = template.replace(`<!--ssr-outlet-->`, appHtml); | ||
|
||
// 6. Send the rendered HTML back. | ||
res.status(200).set({ 'Content-Type': 'text/html' }).end(html); | ||
} catch (e) { | ||
// If an error is caught, let Vite fix the stack trace so it maps back to | ||
// your actual source code. | ||
vite.ssrFixStacktrace(e); | ||
next(e); | ||
} | ||
}); | ||
|
||
app.listen(5173, () => { | ||
console.log('http://localhost:5173'); | ||
}); | ||
} | ||
|
||
createServer(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
import React from 'react'; | ||
import ReactDOMServer from 'react-dom/server'; | ||
import { Provider } from 'react-redux'; | ||
import { StaticRouter } from 'react-router-dom/server'; | ||
import App from './App'; | ||
import { store } from './store'; | ||
|
||
export const render = (url: any, context: any) => | ||
ReactDOMServer.renderToString( | ||
<Provider store={store}> | ||
<StaticRouter location={url} context={context}> | ||
<App /> | ||
</StaticRouter> | ||
</Provider>, | ||
); | ||
|
||
export default render; |
Oops, something went wrong.