Simple Node.js Proxy

By  on  

When I wanted to refresh my React.js skills, I quickly moved to create a dashboard of cryptocurrencies, their prices, and and other aspects of digital value. Getting rolling with React.js is a breeze -- create-react-app {name} and you're off and running. Getting the API working isn't quick, especially if they don't accept cross-origin requests.

I set out to find the easiest possible Node.js proxy and I think I found it: http-proxy-middleware; check out how easy it was to use:

// ... after `npm install express http-proxy-middleware`

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();
app.use('/coins/markets', createProxyMiddleware({ 
    target: 'https://api.coingecko.com/api/v3/coins/markets?vs_currency=USD&order=market_cap_desc&per_page=100&page=1&sparkline=false',
    headers: {
        accept: "application/json",
        method: "GET",
    },
    changeOrigin: true
}));
app.listen(3001);

After node server.js is executed, I can hit http://localhost:3001/coins/markets from my React app and receive quotes from CoinGecko's API. Perfect!

I'm so grateful for projects like http-proxy-middleware ; they allow us to easily move past development issues and help us move forward!

Recent Features

  • By
    Write Better JavaScript with Promises

    You've probably heard the talk around the water cooler about how promises are the future. All of the cool kids are using them, but you don't see what makes them so special. Can't you just use a callback? What's the big deal? In this article, we'll...

  • By
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

Incredible Demos

  • By
    CSS Counters

    Counters.  They were a staple of the Geocities / early web scene that many of us "older" developers grew up with;  a feature then, the butt of web jokes now.  CSS has implemented its own type of counter, one more sane and straight-forward than the ole...

  • By
    Drag & Drop Elements to the Trash with MooTools 1.2

    Everyone loves dragging garbage files from their desktop into their trash can. There's a certain amount of irony in doing something on your computer that you also do in real life. It's also a quick way to get rid of things. That's...

Discussion

  1. I use json-server which work ok for my project:

      "scripts": {
        "start": "run-p dev api",
        "api": "json-server demo/db.json",
        "dev": "react-scripts start",
        ...
    

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!