Gatsby: Gatsby with bootstrap and jquery

[mpolinowski]

Hey AAverin,

have you tried using Bootstrap React Components instead?

There is one option for BS3
https://react-bootstrap.github.io/getting-started.html

And another for BS4
https://reactstrap.github.io

I used them together with create-react-app before Git Repo and they work great.

Right now I am working on a Gatsby/Material UI project and the workflow is pretty similar.

[AAverin]

@mpolinowski I don't really use much stuff from bootstrap in the project – mostly css and one modal popup from the button.
I was hoping to just add bootstrap the old way and finish with it =)

[mpolinowski]

I think that is the perfect use case for a react component - just import the Modal component to your site and be done. No need to add all that Bootstrap CSS:

https://reactstrap.github.io/components/modals/

[AAverin]

@mpolinowski do you have examples on how to integrate it with Gatsby?
Should I have some kind of plugin?

I would like to have my own css for bootstrap – I already made some changes there.
So I need bootstrap.js with jquery/popper in my project

[calpa]

Integrity attribute is to allow the browser to check the file source to ensure that the code is never loaded if the source has been manipulated.

@AAverin In your case, try to remove integrity property.

You may have a look in What are the integrity and crossorigin attribute? - stackoverflow

[mpolinowski]

@AAverin Sorry for the delay - I did not have an example repo online and I am working on building one right now - Github Link

1.) reactstrap does not use jQuery and comes with a bunch of small js files that bring you the functionality of what bootstrap.js would give you - check out _node_modulesreactstraplib_.

2.) Their website says that you might have to install popper for certain features - but all the components I tried so far seem to work without.

3.) If you still need jQuery/Popper, you can npm install and require/import inside your JSX files (as I did not need it so far, I am not sure if there are issues with Gatsby)

__Bug__ You can clone and _gatsby develop_ my repository (the images I used are missing - just replace them with _http://via.placeholder.com/256x180_). The modal and everything else Bootstrap is working just fine. But something goes wrong when I try to build the static page with _gatsby build_ . I think it might be that I am importing _bootstrap.min.css_ from the __node_modules__ folder - which is probably ignored. I still have to look into that part.

[AAverin]

Thanks for the answers
I needed to release my website, so I just put all scripts locally for now.
Will try again with reactstrap later

[mpolinowski]

Ok it's more a personal project then.

But I updated the build - Gatsby is now running with Bootstrap 4 and served by Express.js. Everything is looking fine to me.

Gatsby :heart: Bootstrap

[eysi09]

This is still an issue though. The crossorigin attribute is missing from the build product. I have a similar issue where I have a 3rd party library with an integrity attribute and therefore I need to set crossorigin="anonymous".

Since the crossorigin attribute is missing after I build the app it breaks in production.

[borekb]

Agree that there should be a quick example of how to add jQuery and Bootstrap from CDN if one doesn't want to convert the current site to something like React-Bootstrap or reactstrap. While these options might be more "proper", there is nothing that wrong with doing it the old way and I'm not sure how to best do it (currently, I use an ugly workaround with dangerouslySetInnerHTML, too embarrassed to even post it here :) ).

[EarthSchlange]

@eysi09 Agreed. @borekb there is actually an easier way to do this, but the documentation on crossOrigin attribute is not there even though it should be. I had the same issue with getting the crossorigin attribute to display; crossorigin just disappeared every time I included it.

The issue is I believe is that webpack uses case sensitive crossOrigin attribute not crossorigin causes the problem; look into webpack - output.crossOriginLoading for more details. Also, I did not really want to compile bootstrap myself and run a sass compiler.

The source for Gatsby's html.js has a few good examples where crossOrigin is used instead of crossorigin and does not fail.

<html {...this.props.htmlAttributes}>
        <head>
          <link
            rel="preload"
            href="/static/ftn45-webfont.c2439033.woff2"
            as="font"
            crossOrigin="anonymous"
          />
          <link
            rel="preload"
            href="/static/spectral-latin-400.d6a7b14a.woff2"
            as="font"
            crossOrigin="anonymous"
          />

Solution

• Use the camelCase crossOrigin whenever there is a crossorigin attribute required in source.

Suggestions

• Include documentation for crossOrigin in Docs | Gatsby
• Include documentation suggested by @eysi09 and @borekb

Webpack Issue Refs

• Possibility to load chunks with crossorigin
• Also add script.crossOrigin for hot-reloaded chunks

Screenshot - Gastby.org with crossorigin attribute

Screenshot - Localhost:8000 with crossorigin attribute and sourcefile html.js using crossOrigin

[m-allanson]

Thanks for the detailed writeup @EarthSchlange! Would love any PRs adding docs about crossOrigin.

[EarthSchlange]

@m-allanson I don't mind doing a write-up, documenting the crossOrigin attribute and a PR.

[KyleAMathews]

Hey folks, there seems to be a bit of confusion here — cross origin has nothing to do particularly with Gatsby. It's needed whenever you reference resources from other domains. See the MDN docs https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes

Why adding crossorigin isn't working is that React requires all HTML properties to use camel case so crossOrigin. So this has nothing to do with webpack either.

Thanks for the PR @EarthSchlange! https://github.com/gatsbyjs/gatsby/pull/4578 We always appreciate when people pitch in to help make Gatsby better for everyone.

[m-allanson]

Oh yeah, my bad. @EarthSchlange apologies for leading you astray!

[EarthSchlange]

@m-allanson I learnt something, so it is all good. What @KyleAMathews is good to know in general for working with ReactJS.

[borekb]

If this helps someone, this is how we currently use Bootstrap v3 on our site. Note that we didn't want to re-implement into something like React-Bootstrap which uses a different syntax for components.

The project is in TypeScript and the example demonstrates Modal and Popover components, the later of which requires custom JS initialization via $('[data-toggle="popover"]').popover().

import * as React from 'react';
import * as loadScript from 'simple-load-script';
import 'babel-polyfill'; // must be imported for async/await to work, see e.g. https://github.com/gatsbyjs/gatsby/pull/3369#issuecomment-354599985

// styles are easy
import '../../node_modules/bootstrap/less/bootstrap.less';

class IndexPage extends React.Component {

  // componentDidMount is the right place
  async componentDidMount() {

    // load the two JS libraries into `body`
    await loadScript('https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js', { inBody: true });
    await loadScript('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', { inBody: true });

    // init popover
    $(() => {
      $('[data-toggle="popover"]').popover();
    });

  }

  render() {
    return (
      // standard Bootstrap markup
      <div>
        <div>
          <p>See <a href='' data-toggle='modal' data-target='#full-details'>full details</a>.</p>
        </div>
        <div id='full-details' className='modal fade' tabIndex={-1} role='dialog'>
          <div className='modal-dialog' role='document'>
            <div className='modal-content'>
              <div className='modal-header'>
                <h4 className='modal-title'>Title</h4>
              </div>
              <div className='modal-body'>
                <p>Modal body with
                    <a
                    className='popover-link'
                    data-toggle='popover'
                    data-placement='bottom'
                    data-trigger='focus'
                    data-content='Popover content'
                    data-html='true'
                    tabIndex={0}
                    role='button'
                  >popover</a>
                </p>
              </div>
              <div className='modal-footer'>
                <button type='button' className='btn btn-default' data-dismiss='modal'>Close</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

export default IndexPage;

What I didn't manage to work is installing jQuery & Bootstrap as dependencies and importing them – some internal things in Bootstrap JS couldn't find $.fn and things like that even though I added webpack.ProvidePlugin (some examples on how to do it here or here) into custom Gatsby config.