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
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Full Width Textareas

    Working with textarea widths can be painful if you want the textarea to span 100% width.  Why painful?  Because if the textarea's containing element has padding, your "width:100%" textarea will likely stretch outside of the parent container -- a frustrating prospect to say the least.  Luckily...

  • By
    Create Snook-Style Navigation Using MooTools

    Jonathan Snook debuted a great tutorial last September detailing how you can use an image and a few jQuery techniques to create a slick mouseover effect. I revisited his article and ported its two most impressive effects to MooTools. The Images These are the same...

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!