Build a lightweight Ecommerce Storefront by integrating Cloudinary & Xata, and Deploy to Netlify
Tags: html, css, netlify, jamstack
Published: 2022-11-23 22:04:50

_This post presents a step-by-step guide on integrating Cloudinary & Xata to an HTML and CSS static e-commerce website and Deploying to Netlify. Stay on this guide!_

Cloudinary allows you to upload millions of images and videos to a website or application without needing any third-party software. Xata is a serverless tool that will enable developers with no coding experience to build software and applications without managing multiple applications. Also, with Netlify, you can deploy your application live and show it to other developers for review without paying for a hosting company.

In this article, I created the basic structure of an e-commerce website using HTML and CSS, then integrated a Cloudinary solution for uploading files. I integrated Xata.io as a database solution for storing the data uploads and finally deployed it to Netlify. This article will guide you on how to carry these out quickly.

**GitHub URL**:
We completed this project on GitHub.

https://github.com/Ladyprowess/ecommerce-website-on-cloudinary

## Prerequisite
- A Windows operating system
- A Xata account. [Sign up here](https://xata.io/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) if you don’t already have an account
- A Cloudinary account. [Signup here](https://cloudinary.com/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog) if you don’t have an account
- A VScode editor or any other editor like sublime or notepad.
Building an Ecommerce Website with HTML and CSS

An e-commerce solution provides business owners with the leverage to advertise and sell their products online or over the internet. 
**Step 1**: Download [VScode](https://code.visualstudio.com/download) on your Windows computer and launch. 
**Step 2**: Create a new folder on your desktop where you will save all your project. Go to file and click on **New File** to start a new project.
**Step 3**: Start your `<!DOCType.html>` and save with **index.html** inside your created folder. 

![html and css](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667474114230_html+and+css.jpg)


**This is the HTML code I used for this project.**

https://gist.github.com/Ladyprowess/7b014124d03ceb2854b94c50adc9e852
**Step 4**: For CSS, do the same thing by going to file and clicking on **New File** to start a new project. 
**Step 5**: Start your CSS code and save it with **style.css** inside your created folder. 

**This is the CSS code I used for this project.**

https://gist.github.com/Ladyprowess/ce8322ac5fceb59ec934644bda1d7df2

## How to integrate Cloudinary into the Ecommerce website

Cloudinary is a SaaS technology company that provides an end-to-end video and image management solution for mobile applications and websites. 
**Step 1**: Go to [Cloudinar](https://cloudinary.com/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog)y on your browser and **SIGN UP FOR FREE**. You can sign up with Google, Github, or your Email.

![signup](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667472079743_signup.jpg)


**Step 2**: Once you have signed in, the dashboard will appear like this:

![dashboard](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667472194307_dashboard.jpg)


**Step 3**: Create the HTML and CSS code to insert Cloudinary into the e-commerce website.
**CSS code**

```css
.cloudinary-button {
display: flex;
float: left;
position: relative;
width: 100%;
height: 60%;
border: 3px solid red;
      
}
```

**HTML code**

```javascript
<button id="upload_widget" class="cloudinary-button">Upload Product Image</button>
    <script src="https://upload-widget.cloudinary.com/global/all.js" type="text/javascript"></script>  
```

After you have signed in to Cloudinary, click on dashboard in the menu option. The cloud name is available at the account details option. Copy it as you will need it in your HTML code.

![click on dashboard](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667473230324_click+on+dashboard.jpg)


**Adding an upload preset** 
With upload presets, you can set up options for uploading assets in one place instead of doing it for each upload call. You can set up more than one upload preset and use each in different upload situations.
**To get our upload preset, take the following steps:**

- Go to **Setting**s
- Scroll to Upload Preset and Click on **add upload preset**.
![upload preset](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667473662020_add+upload+preset.jpg)

- Input the Upload preset name, change the Signing mode to  Unsigned, and Click Save.
![save](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667473651793_save.jpg)

- Copy the Upload preset name and paste it into your HTML code.
    uploadPreset: 'lady_prowess'
- Lastly, save your HTML code and run it on your browser. Here is what your website should look like:
![upload image](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667474031363_upload+image.jpg)


After you are done with this section, here is how our `index.html` file looks:

```javascript
    <script type="text/javascript">  
    var myWidget = cloudinary.createUploadWidget({
      cloudName: 'dii62jcmk', // replace with your cloud name
      uploadPreset: 'lady_prowess'}, (error, result) => { //replace with your upload preset
        if (!error && result && result.event === "success") { 
          console.log('Done! Here is the image info: ', result.info); 
        }
      }
    )
    
    document.getElementById("upload_widget").addEventListener("click", function(){
        myWidget.open();
      }, false);
    
    </script>
```
              

**Here is the link to the HTML code:**

https://gist.github.com/Ladyprowess/7f2fe13b731f6a2273f0d0949f7502fa


## How to integrate Xata.io into the Ecommerce website

Xata.io is a serverless database for Jamstack apps that combines the power of a traditional database, making it easier to manage, consume, and store data. 
**Step 1**: Go to https://xata.io/ and click start building for free you will; have the option to signup with Google, Github, or your Email.
**Step 2**: From the dashboard, click start from scratch

![add table](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667474991326_add+table.jpg)


**Step 3**: Type the table name and click Add Table.

![type table name](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667475504596_type+table+name.jpg)


**Step 4**: Click the plus sign (+) and add a String; name your string “label”

![add string](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667475583173_add+string.jpg)


**Step 5**: Click the plus sign (+) again and add a Boolean; name your boolean “done”

![boolean](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667476182406_boolean.jpg)


**Step 6**: Click the Add record and name the label “upload” and “create record”.

![uploads](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667476241266_uploads.jpg)


**Step 7**: Click on Get code snippet, copy the Javascript code snippet and paste it into your HTML code. Then save your HTML code.

```javascript
// Generated with CLI
    const { getXataClient } = require("./xata");
    
    const xata = getXataClient();
    
    const page = await xata.db.upload.getPaginated({
      pagination: {
        size: 15,
      },
    });
    
    console.log(page.records);
```


![javascript](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667476477042_javascript.jpg)


Watch this [video](https://youtu.be/0gyoWxknRd8) to learn how to create data on Xata using Next.js 
Go to the playground tab and run the generated code. You will get a response indicating the setup of your database, meaning it works.

![site](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667481260101_site+deployed.jpg)


When you are done with this section, here is how our `index.html` file looks.

https://gist.github.com/Ladyprowess/7b014124d03ceb2854b94c50adc9e852

## How to deploy the Ecommerce website in Netlify

Netlify is a cloud computing company for developers that serve as a web hosting and automation platform to improve productivity.
To create a free Netlify account, [visit this page](https://www.netlify.com/) and **sign up** for free.

![signup on netlify](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667476782219_signup+on+netlify.jpg)


**Step 1**: Connect Netlify to your GitHub account

![connect to github](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667476916468_connect+netlify+too+girhub.jpg)


**Step 2**: A new page will appear for you to Get started. Fill in the details. 

![get started with netlify](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667477570305_get+started+with+netlify.jpg)


**Step 3**: Deploy your first application. You can choose to import from **GIT** or import **MANUALLY**. However, I imported them manually since the codes were already on my local computer.

![deploy netlify prohect](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667477927010_deploy+your+first+netlify+project.jpg)


**Step 4**: It’ll show published once it has been deployed by netlify. Click on the link to view your website. 

![site deploy](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667478208669_site+deployed.jpg)


**End Point**: https://quiet-fudge-28b95d.netlify.app/

## How to test if your Cloudinary Integration Works

**Step 1**: Go to your [Netlify link](https://quiet-fudge-28b95d.netlify.app/?utm_source=hackmamba&utm_campaign=hackmamba-hackathon&utm_medium=hackmamba-blog).
**Step 2**: Click the **Upload Product Image**. You will get a pop-up showing you to upload an image from any folder of your choice. 

![deploy](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667478636331_site+deployed.jpg)


**Step 3**: After uploading the image, click Done

![upload](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667487682390_Untitled.png)


**Step 4**: After uploading the image, the **transformation** in your Cloudinary dashboard will indicate the number of images uploaded. 

![deploy](https://paper-attachments.dropboxusercontent.com/s_0780E70C6035A0F568114B64CD0D894DA58B9A67BB9CAE961970C9A329864C96_1667480560212_site+deployed.jpg)


Also, you can visit the **Media Library** to see the image that has been uploaded. 

## Conclusion

This article is of immense benefit to developers of an e-commerce website. A Cloud platform for storing databases offers various benefits, including flexibility, dependability, security, and affordability, delivering a sturdy base on which to construct cutting-edge applications for business use. In particular, they can rapidly adjust to shifting workloads and demands without adding to the burden of work for teams already working at total capacity. 


### Resources

[Cloudinary](https://cloudinary.com/documentation/upload_images)
[Xata](https://www.youtube.com/watch?v=0gyoWxknRd8&feature=youtu.be)