-
Notifications
You must be signed in to change notification settings - Fork 10.3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Gatsby with bootstrap and jquery #3182
Comments
Hey AAverin, have you tried using Bootstrap React Components instead? There is one option for BS3 And another for BS4 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. |
@mpolinowski I don't really use much stuff from bootstrap in the project – mostly css and one modal popup from the button. |
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: |
@mpolinowski do you have examples on how to integrate it with Gatsby? I would like to have my own css for bootstrap – I already made some changes there. |
@AAverin In your case, try to remove integrity property. You may have a look in What are the integrity and crossorigin attribute? - stackoverflow |
@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_modules\reactstrap\lib. 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. |
Thanks for the answers |
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 ❤️ Bootstrap |
This is still an issue though. The Since the |
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 |
@eysi09 Agreed. @borekb there is actually an easier way to do this, but the documentation on The issue is I believe is that webpack uses case sensitive The source for Gatsby's html.js has a few good examples where
Solution
Suggestions
Webpack Issue RefsScreenshot - Gastby.org with
|
Thanks for the detailed writeup @EarthSchlange! Would love any PRs adding docs about |
@m-allanson I don't mind doing a write-up, documenting the |
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 Thanks for the PR @EarthSchlange! #4578 We always appreciate when people pitch in to help make Gatsby better for everyone. |
Oh yeah, my bad. @EarthSchlange apologies for leading you astray! |
@m-allanson I learnt something, so it is all good. What @KyleAMathews is good to know in general for working with ReactJS. |
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 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 |
I have a mixed project – not all of it is full-react, unfortunately, there are some pieces of code that I have to render as plain html and use some jquery scripts to operate it. No way to re-write to react.
Anyways,
I am trying to integrate jquery with bootstrap, and keep having issues.
First I tried with ReactHelmet, but bootstrap was always complaining that jquery is missing.
Bootstrap docs say to add it's scripts to the end of ,
So I have overriden
html.js
and added bootstrap there.Now the problem is, when I run this thing and check the code – <script> tags no longer have crossorigin parameter in them, and I get an error that:
How can I make gatsby keep
crossorigin
?The text was updated successfully, but these errors were encountered: