Topic: Gatsby & MDB React - quick start quide
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?
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?
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 https://github.com/anna-morawska/gatsby-material-design-for-bootstrap
Start the development server.
Gatsby will start a hot-reloading development environment accessible by default at localhost:8000.
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 :
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.
- Category: React
- Specification: React