Skip to content

DIY repository setup

Jump to bottom
Martin Corevski edited this page Jun 14, 2018 · 4 revisions

Step by step guide

First check this guide

Install

npm i @material-ui/core typeface-roboto @material-ui/icons

# Or with yarn
yarn add @material-ui/core typeface-roboto @material-ui/icons

  • By installing and using Material-UI you won't need isomorphic-style-loader most of the time because MUI has its own HOC withStyles which takes the critical CSS and drops it as style inside the head tag.

  • react-helmet

  • react-ga

npm i react-helmet react-ga

# Or with yarn
yarn add react-helmet react-ga

  • React helmet will help you edit the head tag on a route (component/page) change.

  • React ga lets you easily implement google analytics.

  • ignore-loader

npm i -D ignore-loader

# Or with yarn
yarn add ignore-loader -D
  • See the Webpack config update.

Webpack config updates

  • Update the webpack.config.js file.
// File loader for fonts
{
  test: /.*(3|4|5)00\.(woff|woff2|eot|ttf|otf)$/,
  use: {
    loader: 'url-loader',
    options: {
      // Limit at 10k. Above that emit separate files
      limit: 10000,
      // url-loader sets mimetype if it's passed.
      // Without this it derives it from the file extension
      mimetype: 'application/font-woff',
      // Output below fonts directory
      name: 'assets/fonts/[name].[ext]',
      fallback: 'file-loader' // use file loader for size > 10KB
    }
  }
},
// Ignore fonts
{
  test: /.*((\d00.+)|((1|2|6|7|8|9)00))\.(woff|woff2|eot|ttf|otf)$/,
  use: {
    loader: 'ignore-loader'
  }
}

  • Inspired by this SO answer I am ignoring all the font types that Material-UI isn't using. Material-UI uses Roboto 300, 400 and 500, docs reference.

  • Using the isomorphic-style-loader you can load the fonts, create an SCSS file for one of the top-level components, in this case, I chose the App component. In this case, the ContextProvider is used as a wrapper for the App component inside the index.js file.

  • Create the App.scss file:

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/roboto-latin-300.woff2') format('woff2'),
    url('/assets/fonts/roboto-latin-300.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/roboto-latin-400.woff2') format('woff2'),
    url('/assets/fonts/roboto-latin-400.woff') format('woff');
}

@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/roboto-latin-500.woff2') format('woff2'),
    url('/assets/fonts/roboto-latin-500.woff') format('woff');
}
Clone this wiki locally