original post at my blog
This post is intended to help out developers who love using Gatsby JS and Twitter Bootstrap and would absolutely love to use them together in one project - lovely!
One issue you might come across would be how to link them both up. For this you have two options: you can use supported packages like React Bootstrap or reactstrap, or you can include in CDN links to your app.
While the first option is quite great, I feel it is a bit too much of an overkill to use, especially if what you need from Bootstrap is just the juicy CSS. non-jQuery part and functionality like the grid system or typography. If so, we will go with the second option. This sounds easy, till you discover that Gatsby apps created with the starters have no
index.html file like in normal React apps made with
create-react-app, or any other front end project.
Now, where do we include our CDN links? There is no
html file, hence no
head tag. This is where the purpose of this article comes into play.
Again, we have two options - hey! Life's full of options.
Gatsby projects come with a
seo.js file which can be found in
src/components. This component uses React Helmet to function. This makes it easy for us to just make changes to the
html file that will be produced when gatsby bundles our app. We can include the CDN link by so doing:
<Helmet> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" /> </Helmet>
This is relatively easy to do and should work well. I used this before, till I noticed that sometimes and for some reason, it did not work - it worked most of the time - and required the user to refresh the page for it to hopefully work. You can't expect users to do that!
This leads us to the second workaround.
A look into the project structure created for us when we bootstrap an app with a Gatsby starter should show a file in root folder called
According to the Gatsby website, "This file is where Gatsby expects to find any usage of the Gatsby browser APIs (if any). These allow customization/extension of default Gatsby settings affecting the browser."
To do this, we have to let go of our CDN. Sorry that the article of this blog might be misleading as we will have to drop our CDN link here. All for the best. We have to install Bootstrap in our project. For this, run:
npm install bootstrap
yarn add bootstrap
This installs the official Bootstrap folders in our app. Next, open up the
gatsby-browser.js file and import the CSS files from Bootstrap at the top of the file like so
//bootstrap import 'bootstrap/dist/css/bootstrap.css';
And that's it! Feel free to use Bootstrap styles as you wish. No hassles!
Thanks for following along and would love to have a feedback of how this helped you, or if you have your own way of linking them both up.