search

Atyantik / react-pwa

An upgradable boilerplate for Progressive web applications (PWA) with server side rendering, build with SEO in mind and achieving max page speed and optimized user experience.
https://www.reactpwa.com
MIT License
2.57k stars 302 forks source link

add <link> to <head> when SSR is disabled #140

Closed goldylucks closed 5 years ago

goldylucks commented 5 years ago

Thanks a lot for the project!

I've disabled SSR and I want to add some <link> tags to the <head> - ATM I need it for a google font for material ui, but I'm sure I'll need more modifications anyway.

I've searched this repo and the pawjs repo and didn't find documentation or examples for that.

I'm guessing it's ... done through the hooks? If so, where can I see info on that?

I'd be happy to submit a PR with docs with some guidance :)

Thanks again for the project! <3

tirthbodawala commented 5 years ago

@goldylucks Thanks for the question, please have a look at the below code, even if you have disabled SSR, while building the App, the server.js is used and server hooks are used to create the static HTML thus below code help you achieve what you are looking for:

File: /src/server.js

import React from 'react';
// ... other imports

export default class Server {
  apply(serverHandler) {
    // ... other hooks or code

    // Add google fonts 
    serverHandler.hooks.beforeHtmlRender.tapPromise('AddGoogleFonts', async (Application) => {
      const { htmlProps: { head } } = Application;
      head.push(<link key="google-roboto-fonts" href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" />);
    });
}
goldylucks commented 5 years ago

Thanks @tirthbodawala , worked like a charm!

Couple of suggestions to avoid future questions:

  1. add somewhere in the docs that server.js is used even when SSR is off
  2. add the google font for material ui in your material ui example

Thoughts?

tirthbodawala commented 5 years ago

@goldylucks Good idea. Can absolutely do that.