Using JQuery with gatsby
Tags: gatsby, jquery, javascript
Published: 2020-08-20 01:32:10

Photo by Karolina Grabowska from [Pexels](https://www.pexels.com/photo/raw-almonds-and-fresh-blueberries-put-on-white-surface-4033321/)  

In this tutorial, we are going to look at how you can integrate jquery based template in to a gatsby website. 

A lot, of people, are struggling to get jquery work in a gatsby because it uses `windows` and `document` and as you know that gatsby struggles to use these objects.

So to make things easier I'm going to use a good responsive template from [HTML5 UP](https://html5up.net/) because most of the templates here use jquery as a default library. 

## Step 1(Find a template)
There are a lot of templates you can scroll and look at the demo to get a feel how they'd look like. Also, depends on your needs and requirement of what your website should look like. Of course, there are other platforms you can use to download a template you like. 

## Step 2(Download and Extract)
After you have found the template download it in your local machine. It will be a zip file of HTML, CSS, scripts and assets. Extract all the files in a folder and open the project to make sure everything is working correctly.

## Step 3(Initialize a gatsby project)
Kick-off your project with this default boilerplate. The starter ships with the main Gatsby configuration files you might need to get up and running blazing fast with the blazing-fast app generator for React.

Use the Gatsby CLI to create a new site, specifying the default starter.
```bash
# create a new Gatsby site using the default starter
gatsby new my-default-starter https://github.com/gatsbyjs/gatsby-starter-default
```
Navigate into your new site’s directory and start it up.
```bash
cd my-default-starter
gatsby develop
```

## Step 4(Integrate)
### Integrate Styling
- if you can't find `gatsby-browser.js` in the root directory of your gatsby project then create one.
- create a `styles` folder on the root of your gatsby project `src/styles` and paste all the CSS files in it.
- add all your CSS files path in `gatsby-browser.js` file.

```javascript
// gatsby-browser.js

import "./src/styles/main.css"
import "./src/styles/noscript.css"
```

- resolve import errors (either font/images/css file)

### Integrate Scripts
- if you can't find a `static` folder at the root of your repo then create one. Please read detailed documentation about why and when to use static folder from the [official gatsby site](https://www.gatsbyjs.com/docs/static-folder/).
> You can create a folder named static at the root of your project. Every file you put into that folder will be copied into the public folder. E.g. if you add a file named sun.jpg to the static folder, it’ll be copied to public/sun.jpg

- install `react-helmet` and add all your scripts inside it in the `Layout` component.

```javascript
// layout.js
import { withPrefix } from "gatsby"
const Layout = ({ children }) => (
  <>
    <Header />
    <SEO title="Demo" />
    <Footer />
    <Helmet>
        <script src={withPrefix('../../scripts/jquery.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/jquery.scrollex.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/jquery.scrolly.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/browser.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/breakpoints.min.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/util.js')} type="text/javascript" />
        <script src={withPrefix('../../scripts/main.js')} type="text/javascript" />
    </Helmet>
  </>
)
```

### Add Images
- add the images in the `src/images` folder 

### Voilà
That's it, that's all it takes.
![Done](https://media.giphy.com/media/3o6ZtkTtNTSngwbh1m/giphy.gif)