Like me, you may need sometimes to build some kind of back-office tool along with your frontend application. This is obvious, some contents need to be managed by the team…

And while this can be a nice idea to use some SASS solution just like we saw in a previous article with Contentful

Sometimes you might need something that is just custom heavy, branded and that can fill with your own product needs, such as displaying metrics. For that purpose, you can use many frontends frameworks such as Material-UI for react. But in my opinion, the best and most complete framework currently is Elastic UI.

Let’s see why with a bit of context.

👨🏻‍🔬Elastic-UI (EUI): the best framework for back-offices made with react?

The first thing you have to know is that EUI is made by a company named Elastic. You might have heard of them for the famous Elastic Search tool.

But Elastic is not only making a search engine! They also provide some kinds of tools to improve the way to feed that search engine and consume its data.

We have the famous ELK (Elastic-Logstash-Kibana) stack, which is about collecting various data feed and stream, generally for stats and systems monitoring through the Elastic Beats some kind of daemon used to report metrics from systems.

Logstash is used as an entry point to receive, process and forward data to Elastic Search.

is used as an entry point to receive, process and forward data to Elastic Search. ElasticSearch is used for indexing and persistence.

is used for indexing and persistence. And finally, Kibana is made to display those beautiful data in a back-office dashboard.

You might be asking « Why is that guy telling us all of this? We only want to know about ReactJS and EUI… »

And the answer just fills in one sentence:

Elastic-UI (EUI) is the UI kit used by Kibana that have been open-sourced to extend Kibana or make custom back-office.

👨🏻‍🎨 A UI kit built and oriented to be data-display centric!

A dashboard made with EUI

Kibana is a dashboard, its only purpose is to display data in a way that is relevant to the user to consume it. The Elastic team has spent a lot of research to get a good product. They even searched for optimization in terms of UX.

💁🏻‍♂ ️Everything is described in an awesome Guidelines Section which I can only suggest you read.

You can also extend it pretty easily with sass and use it along with some CSS-in-JS library such as my favorite styled-components.

In addition to that, it is also probably the Most complete UI kit for back-office you can find. It ships with Layout, Pickers, buttons and even charts tools.

You probably don’t need any other library to use it… but it comes with one issue which is bad but not meaningless…

💔 EUI doesn’t support Server-Side Rendering out-of-the-box.

What it means is that you cannot use it in NextJS without some configuration.

Here are some related threads on GitHub [1830, 2074] and as you can see: they don’t expect to provide support for that in the next months.

Why would you do that?

Because NextJS provide nice scaffolding and tools with plugins for sass, backend code, progressive web-apps, rendering optimization, code-splitting and also routing. (Is that enough for you? 🤣)

And if you install it as it is described in the documentation: yarn add @elastic/eui , you will end up in something like this:

Damn… Such a great tool that I can’t use with my favorite software… But wait… Hacking to the rescue 🕵🏿‍♂️

A hack to make Elastic-UI work on SSR with NextJS

Briefly, it crashes the app because the program is trying to access various APIs that are not available on NodeJS.

Here is a workaround solution based on two files:

First, we edit next-config.js to allows allow, don’t forget to install @zeit/next-sass package. Then extends your configuration to use a custom webpack config and wrap this with withSass . Starting now, your app is not crashing when you reload next dev but you don’t get the CSS because it’s not loaded. You’ll need to use a custom SASS file because if you use the CSS file or directly import the file we import in the CSS, once you run next build you’ll lose the built CSS that will be stripped by our above code. Import the scss file we just made in your pages/_app.js (or typescript equivalent)

Mine pages/_app.tsx start blocks looks like that:

// Load design

import "@modules/ui/app.scss";

There we are! Enjoy your application running on Zeit + EUI and have fun making awesome admin experiences!