Gatsby & MDB React - quick start quide

Topic: Gatsby & MDB React - quick start quide
Published 04.02.2019 Updated 03.12.2019

Anna Morawska staff posted 3 years ago

Gatsby & MDB React - quick start quide

From version 4.9.0 MDB React library supports server-side rendering, which means, that it is also possible to integrate it with static site generator such as GatsbyJS. In today's article, we are going to explain how to get started with Gatsby & MDB

What is Gatsby?

Gatsby is a site generator which uses React as its templating language. But what does it mean?

Gatsby under the hood compiles your app to static HTML sites - if you take a look into the public folder which is generated after the build process it contains a bunch of HTML and Javascript files. It allows serving static HTML files on initial loading, in order to render pages as soon as possible. Then the minimal amount of Javascript code is downloaded in order to bootstrap your page to a full React app. In other words, you have the best of two worlds - your page is as fast as static HTML pages and at the same time dynamic and interactive, so it behaves like regular Single Page Application

Did you know?

The official React docs site is built with Gatsby

Moreover, Gatsby offers you a complete development setup, which was created to optimize development experience and enhance your production code. You don't have to bother about configuring Webpack or Babel, it's all built in, with an emphasis on making your site as fast as possible, with all of the modern techniques such as code splitting, asset optimization and more. You can also quickly extend basic configuration with easy to use official plugins.

Gatsby may be a perfect choice if you have just started working with React

Headless Content Management System

It's nice, but actually Gatsby is an even more powerful tool than that. Have you heard about "headless" CMS trend?

This conception is becoming more and more important in a web development world. This model assumes the separation of content and presentation layer of the website. The headless CMS works just like API which serves data. It is de-coupled from the design.

With the help of the Gatsby's plugins ecosystem, you can use Gatsby as a presentational layer for your CMS. It lets you easily connect your front-end with the data served from a headless CMS through API endpoints - you just query for data directly in your React components. With Gatsby you can even use markdown files to generate pages in your site.

This means that for example - if you want to build your personal blog - all you have to do is build a front-end template with React and attach to the project your blog post as a simple markdown files.

So, if a traditional CMSs such as WordPress don't meet your requirements, it's something you should consider in your next project.

How to use it?

New Project

Before you use Gatsby make sure you have Gatsby’s command line tool installed globally on your machine:

npm install --global gatsby-cli

If you are creating a new website, the best option is to base your project on a starter maintained by our team. ( Check out live demo here )This boilerplate is already configured to use with mdbreact library:

gatsby new your-procet-name

Start the development server.

gatsby develop

Gatsby will start a hot-reloading development environment accessible by default at localhost:8000.

Existing project

To add MDBReact library to your project just type

npm install mdbreact

To include global styles files add imports shown bellow in the gatsby-browser.js file :

import '@fortawesome/fontawesome-free/css/all.min.css' 
import 'bootstrap-css-only/css/bootstrap.min.css' 
import 'mdbreact/dist/css/mdb.css'

If you don't have this file in the project root directory, create one. It's one of the configuration files which Gatsby looks for, so make sure you haven't misspelt the name.

Styles don't load correctly?

If you have created your project based on default starter, it includes css files which override CSS rules defined in mdbreact stylesheets. Make sure you have deleted global styles defined in layout.css file.

That's it - your project is ready to use our components. Browse through our documentation and choose components you like.

If you notice an error, or something below is not clear to you - we invite you to visit our support forum.

alex sentongo commented 3 years ago

i get an error that MDBTabPane, MDBTabContent are not members in mdbreact

Anna Morawska staff commented 3 years ago

Hi Alex,
Could you use our support forum and provide us with more details about the issue? Thanks!

Jacob Cavazos pro commented 2 years ago

Thank you for this! It helped me switch from create-react-app over to Gatsby. I was also able to create a starter site based on my personal website and it is now in the collection of Gatsby starter sites. 

Mark Long commented 2 years ago

How complicated would a switch to the Pro version be?  

Jakub Chmura staffpremium commented 2 years ago

Update gatsby project with MDB React Free to MDB React Pro is very simple. You just need copy all required dependency from MDB React Pro package.json to your gatsby project package.json 

Declan pro commented 2 years ago

We've been evaluating MDBReact + Gatsby for use on an upcoming project - however Chrome Lighthouse audit performance scores are very poor.

The live demo above for example is only scoring around 40% - which is relatively easily achievable without the use of Gatsby.

Has performance/speed/Chrome Lighthouse ranking been considered in MDBReact or should it be avoided for sites that require good performance?

mark-steven-au propremiumpriority commented a year ago

This was helpful and worked!

Krzysztof Wilk staff commented a year ago

Glad to hear that :)

Please insert min. 20 characters.