Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

how to integrate this with SSR ? #361

Open
sibelius opened this issue Jun 26, 2024 · 0 comments
Open

how to integrate this with SSR ? #361

sibelius opened this issue Jun 26, 2024 · 0 comments

Comments

@sibelius
Copy link

Is your feature request related to a problem? Please describe.
How to let favicons-webpack-plugin generates all the favicons, but be able to get this info to render on SSR ?

Describe the solution you'd like
use webpack-manifest-plugin or assets-webpack-plugin to get the asset, chunks information

Describe alternatives you've considered
expose a function on this favicons-webpack-plugin to generate the proper tags

Additional context

this is how I'm generating my hmtl

export const indexHtml = ({
  assets,
  html,
  initialProps,
  styledComponentStyleTags,
  muiStyleTags,
}: IndexHtml) => {
  const helmet = Helmet.renderStatic();

  return `
    <!doctype html>
      <html lang="">
      <head>
          <meta charset="utf-8" />
          ${helmet.title.toString()}
          <meta name="viewport" content="width=device-width, initial-scale=1">
          ${helmet.meta.toString()}
          ${helmet.link.toString()}
          ${styledComponentStyleTags}
          ${muiStyleTags ? `<style id='jss-ssr'>${muiStyleTags}</style>` : ''}
          ${
            assets.main.css
              ? `<link rel="stylesheet" href="${assets.main.css}">`
              : ''
          }
          ${
            process.env.NODE_ENV === 'production'
              ? `<script src="${assets.main.js}" defer></script>`
              : `<script src="${assets.main.js}" defer crossorigin></script>`
          }
          <style>
            html, body {
              font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
              background-color: #f8f8f8;
            }
        </style>
      </head>
      <body ${helmet.bodyAttributes.toString()}>
        <div id="root">${html}</div>
        <script>
          window.__initialProps__ = ${serialize(initialProps, {
            isJSON: true,
          })};
        </script>
      </body>
    </html>
  `;
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@sibelius