Use Semantic UI in create-react-app

Semantic UI a powerful UI framework for front-end development, and few years ago it launched a React integration: Semantic UI React. However it does not have any instructions for installing on apps bootstrapped with create-react-app. This blog will be a very short one -- it includes the recipe I used while installing the full Semantic UI package on my create-react-app project, and the problems I was running into.

Install React package

Before we move on, make sure you have the React package for Semantic UI:

• Install via yarn:

> yarn add semantic-ui-react

• Install via npm:

> npm install semantic-ui-react

Install UI Package

After that, we can start installing Semantic UI, you can either install the full Semantic UI package (which is what we are going to cover here), or just have the CSS package if you don't want custom theming support.

Issues on the official documentation:

The official documentation recommends to use yarn to install the package:

> yarn add semantic-ui --dev

However it will freeze at the first step of installing, it has been an known issue for a while.

To install, we have two methods, each one is relatively short and simple.

Method 1: Via npm

Instead of using yarn, we can use npm to install:

> npm install semantic-ui --saveDev

Method 2: Via yarn

If you think npm is too slow and insist to use yarn...okay I understand, but do this instead (thanks to @Ahmad-Maged's solution on this issue):

> yarn add semantic-ui --ignore-scripts
> cd ./node_modules/semantic-ui/
> gulp install

For both methods, choose the desired installation method as you wish when prompted (I choose "Automatic" for the sake of simplicity).
For the installation path, Semantic UI needs to be installed inside the /src since your create-react-app instance will not have permission to navigate outside of it. Make sure you put the absolute path here (for example: C:/my-react-app/src if /my-react-app is your project root folder).

After the installation is complete, the UI package will be installed at ../project-folder/src/semantic.
Move the file semantic.json to folder /semantic, and edit it:

{
-   "base": "semantic\\",
+   "base": "/",
    "paths": {
    "source": {
      ...
    },
    ...
}

Build Semantic Library

> cd /project-folder/src/semantic`
> gulp build

Then, every time before making changes to the theme:

> gulp watch

Make sure everything works

To make Semantic UI works, add the minified CSS to src/index.js:

import './semantic/dist/semantic.min.css';

To test if the installation is successful, simply add some components from Semantic UI to your site, for example, we can add a button on the top of our App.js:

import React, { Component } from 'react';
import { Button } from 'semantic-ui-react'
...
class App extends Component {
  render() {
    return (
      <div className="App">
        <Button>Test</Button>
        <header className="App-header">
          ...
        </header>
      </div>
    );
  }
}

export default App;

If the button shows up on top, cheers! You have succesfully added Semantic UI to your app!

Getting Stuck? No Luck?

Make a comment below! Make sure to describle the problems as detailed as possible so I can take a look what's wrong!