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

Incredible Demos

  • By
    Create Spinning Rays with CSS3 Animations & JavaScript

    Thomas Fuchs, creator of script2 (scriptaculous' second iteration) and Zepto.js (mobile JavaScript framework), creates outstanding animated elements with JavaScript.  He's a legend in his own right, and for good reason:  his work has helped to inspire developers everywhere to drop Flash and opt...

  • By
    Create Twitter-Style Dropdowns Using jQuery

    Twitter does some great stuff with JavaScript. What I really appreciate about what they do is that there aren't any epic JS functionalities -- they're all simple touches. One of those simple touches is the "Login" dropdown on their homepage. I've taken...

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!