Skip to content

Commit

Permalink
chore: enhance ssr manifest example (#182)
Browse files Browse the repository at this point in the history
  • Loading branch information
9aoy authored Dec 2, 2024
1 parent b69853c commit 6f5a9d7
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 7 deletions.
3 changes: 0 additions & 3 deletions rsbuild/ssr-express-with-manifest/rsbuild.config.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,6 @@ import { pluginReact } from "@rsbuild/plugin-react";

export default defineConfig({
plugins: [pluginReact()],
dev: {
writeToDisk: true
},
environments: {
web: {
output: {
Expand Down
21 changes: 17 additions & 4 deletions rsbuild/ssr-express-with-manifest/server.mjs
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,23 @@ import { createRsbuild, loadConfig, logger } from "@rsbuild/core";

const templateHtml = fs.readFileSync('./template.html', 'utf-8');

let manifest;

const serverRender = (serverAPI) => async (_req, res) => {
const indexModule = await serverAPI.environments.ssr.loadBundle("index");

const markup = indexModule.render();

const { entries } = JSON.parse(fs.readFileSync('./dist/manifest.json', 'utf-8'));
const { entries } = JSON.parse(manifest);

const { js, css } = entries['index'].initial;
const { js = [], css = []} = entries['index'].initial;

const scriptTags = js.map(file => `<script src="${file}" defer></script>`).join('\n');
const styleTags = css.map(file => `<link rel="stylesheet" href="${file}">`).join('\n');
const scriptTags = js
.map((url) => `<script src="${url}" defer></script>`)
.join('\n');
const styleTags = css
.map((file) => `<link rel="stylesheet" href="${file}">`)
.join('\n');

const html = templateHtml.replace("<!--app-content-->", markup).replace('<!--app-head-->', `${scriptTags}\n${styleTags}`);

Expand All @@ -32,6 +38,11 @@ export async function startDevServer() {
rsbuildConfig: content,
});

rsbuild.onDevCompileDone(async () => {
// update manifest info when rebuild
manifest = await fs.promises.readFile('./dist/manifest.json', 'utf-8');
})

const app = express();

// Create Rsbuild DevServer instance
Expand All @@ -54,6 +65,8 @@ export async function startDevServer() {
const httpServer = app.listen(rsbuildServer.port, () => {
// Notify Rsbuild that the custom server has started
rsbuildServer.afterListen();

console.log(`Server started at http://localhost:${rsbuildServer.port}`);
});

rsbuildServer.connectWebSocket({ server: httpServer });
Expand Down

0 comments on commit 6f5a9d7

Please sign in to comment.