Add CSV import to your Node.js app using UseCSV
Tags: javascript, webdev, node, codenewbie
Published: 2022-02-16 23:27:12

CSV is convenient. The likes of Excel, Google Docs, spreadsheet export functions, and reporting applications all support CSV in some capacity. CSV works well with large data sets and the major perk is that it can easily be converted to other formats such as XML or JSON. 

This is where the hard part starts - how do you easily convert CSV data for your app, MVP, or SaaS? For JavaScript-based applications, there's a plethora of [free CSV parsers](https://layercode.com/community/top-javascript-csv-parsers) available. While these libraries are great, open-source is known to pose a security risk such as relaxed integration oversight and potentially poor and integrated practices.

So what are your options? What alternatives to free CSV parsers do you have? One solution is to use UseCSV.

## What is UseCSV?

UseCSV is a SaaS (software as a service) that provides you with a simple-to-use interface and tools to easily and securely transform your CSV datasets into JSON format. 

Here is a shortlist of UseCSV perks:

- supports CSV and all Excel formats (`xlsx`, `xls`, `xlt`), including legacy Excel versions. 
- easy to integrate into your frontend
- can handle large import files and doesn't use arbitrary upload limits, so you're not required to split up your files
- secure and compliant to best practice security standards
- comes with an easy to use the console to configure your validation rules

Without further ado, let's get on with setting up UseCSV into your React + Node.js app. 

## Setting up your React frontend

Setting up your React frontend for UseCSV is super simple. All you have to do is install the UseCSV importer plugin, add some code to your app and make sure you add your `importerKey`. 

Here is a series of snippets to get you started.

Step 1: Download UseCSV package from npm.

```
npm install @usecsv/react
```

Or, if you prefer to use Yarn:

```
yarn add @usecsv/react
```

Step 2: Add the UseCSV component to your app. Here is an example of what it looks like:

```javascript
import UseCSV from "@usecsv/react";

function App() {
  return (
    <div className="App">
      <h1>Start importing your data</h1>
      <UseCSV importerKey="<your importer key here>">
        Import Data
      </UseCSV>
    </div>
  );
}

export default App;
```

There are two props available for UseCSV:

- `importerKey` - this is a `string` and connects your frontend to importer. You can store this value as an `.env` for security reasons. This key is available in the admin panel of your importer.
- `user` - this is a JSON object that can be used to pass additional data to the webhook and is relayed to the backend. 

## Setting up a barebones backend with Node.js

In this portion of the tutorial, we are going to set up a barebones Node.js API backend. There will be two endpoints - 

- `GET` `/users` to test that the data received from `POST` is processed correctly to our app
- `POST` `/users` to act as our example endpoint for receiving CSV to JSON data

To set up your Node.js application, add `express` and `bodyParser` to your app's folder.

```
npm i express body-parser
```

What is [Express](https://www.npmjs.com/package/express)? Express is a web framework for Node. It lets you do routing and comes with HTTP helpers that we are going to be using for this tutorial walkthrough.

What is [bodyParser](https://www.npmjs.com/package/body-parser)? body-parser is a middleware for parsing incoming requests and making them available under the `re.body` property. 

Once you have both packages installed, make sure to import them into your application. For this tutorial, it is the `server.js` file. Here is the fully-functional code for a bare-bones backend with comments.

```javascript
const express = require("express");
const bodyParser = require("body-parser");
const app = express();

// Make sure you place body-parser before your CRUD handlers or else it will not work.
app.use(bodyParser.json());

// default route
app.get("/", function (req, res) {
  res.send("Hello Layercode");
});

/* Setting the data */
let users = [
  {
    first_name: "Shane",
    last_name: "Oaks",
    username: "SOaks",
  },
  {
    first_name: "Elwood",
    last_name: "Horsfield",
    username: "Elwooders",
  },
];

/* Create POST */
const addUsers = (req, res) => {
  content.forEach((row) => {
    users.push(row);
  });

  res.send(users);
};

app.post("/users", addUsers);

/* Read GET */
const getUsers = (req, res) => {
  res.send(users);
};

app.get("/users", getUsers);

/* the port and server 
   to run, use the command - node server.js
*/
app.listen(3000, function () {
  console.log("listening on 3000");
});

```

To start your app, run the command `node server.js` This will make `localhost:3000` available for your APIs.

## Creating your project and attaching a webhook

Step 1: Sign up for the [free UseCSV developer account](https://app.usecsv.com/signup).

![01.PNG](https://res.cloudinary.com/layercode/image/upload/v1644892370/01_3ff14e3e6e.png)

Step 2: Click on **Add importer** button to create a new importer. Give your importer a name. 

![csv-02.PNG](https://res.cloudinary.com/layercode/image/upload/v1643839765/csv_02_40decf05e5.png)

Step 3: Once you've clicked **Save**, you will be given a screen where you can do the following things:

- find your importer **Key**. This value is to be added to your React component prop. 
- the Webhook URL field. This is where you can add your backend endpoint URL. For `localhost` testing, you can use a tunnel service. [Cloudflare](https://layercode.com/community/cloudflare-tunnels) has a free tunneling service. You can check out the tutorial on [how to set it up here](https://layercode.com/community/cloudflare-tunnels).
- Configure your fields by clicking on **Add Column**. Fill in the fields and repeat for all your other required columns. 

Add your importer **Key** to your React app and set up your columns. Boot up your `localhost` tunnel and add it as your [webhook endpoint](https://layercode.com/community/webhooks). 

![csv-05.PNG](https://res.cloudinary.com/layercode/image/upload/v1643839806/csv_05_ad5efbf156.png)

## Upload your CSV data via your React frontend

Once you've added your importer **Key** as the prop, you can start uploading CSV data to your backend right away. Your column settings will show up here and all you have to do is follow the easy-to-use wizard.

![csv-07.PNG](https://res.cloudinary.com/layercode/image/upload/v1643839877/csv_07_a16cdd2d0e.png)
![csv08.PNG](https://res.cloudinary.com/layercode/image/upload/v1643839877/csv08_40b1369e1f.png)
![csv-11.PNG](https://res.cloudinary.com/layercode/image/upload/v1643839877/csv_11_aa487413b5.png)

Once completed, the interface will give a green success tick. 

That's it. You can check if your data was sent correctly via a REST client on the `GET` endpoint we created earlier. Stay tuned for more free tutorials. Comment below if you want anything specific.

And that's it for this tutorial! Stay tuned for more free tutorials. Comment below if you want anything specific.