How to Modify the Hubs Homepage

[Voxelghiest]

After looking through the Hubs repo, and from the information I already know about how Hubs works, I think I was able to figure out how to modify the Hubs homepage.

When the Hubs client is first accessed, it loads the page index.html. But index.html is merely a framework. To add the components, Hubs then passes control to index.js, which handles the setup process. index.js receives the homepage data from another JavaScript file (as can be seen on line 7), HomePage.js.

Thus, HomePage.js is where the data for the homepage can be modified.

[Voxelghiest]

Let's elaborate on the above process. When Hubs Client first loads, it runs the file index.js. index.js returns a React component that creates an instance of the Homepage component:

function Root() {
  return (
    <WrappedIntlProvider>
      <ThemeProvider store={store}>
        <AuthContextProvider store={store}>
          <HomePage />
        </AuthContextProvider>
      </ThemeProvider>
    </WrappedIntlProvider>
  );
}

The Homepage component is a custom React component defined in HomePage.js. It contains the entire layout for the Hubs Client homepage, including the navigation bar, sign-in button, etc.