How to configure React dev and lambda serve to run same time on same port

Support
, ,
#1

I’m using React + Webpack and i have Lambda working great with them when deployed to Netlify. But i can’t get them to work on dev (my Mac) at the same time.

I thought i need to use this: “dev”: “npm start; npm run start:lambda”, but when i run this, only the React dev server runs, but after i do CTRL + C the React dev closes and then Lambda runs.

	"scripts": {
		"start": "webpack-dev-server --config config/webpack.dev.js",
		"build": "webpack --config config/webpack.prod.js --no-source-maps",
		"dev": "npm start; npm run start:lambda",
		"prod": "npm run build; npm run build:lambda",
		"start:lambda": "netlify-lambda serve functions",
		"build:lambda": "netlify-lambda build functions"
	},

I have tried creating a proxy function in /functions folder, but not working.

const proxy = require('http-proxy-middleware')

module.exports = (app) => {
  app.use(
    proxy('/.netlify/functions/', {
      target: 'http://localhost:9000/',
      pathRewrite: {
        '^/\\.netlify/functions': '',
      },
    }),
  )
}

Then i tried editing my Webpack dev config so added this, but still nothing:

  devServer: {
    proxy: {
      '/.netlify': {
        target: 'http://localhost:9000',
        pathRewrite: { '^/.netlify/functions': '' },
      },
    },

Any tips?

#2

lol i just needed to change from ; to & in npm. So ignore this one :smiley:

But any other tips i would need to know when running them at the same time in development, what about the CORS?

Update: also added port to my dev Webpack config

  devServer: {
    port: 9000,
  }

And removed:

  devServer: {
    proxy: {
      '/.netlify': {
        target: 'http://localhost:9000',
        pathRewrite: { '^/.netlify/functions': '' },
      },
    },

and

const proxy = require('http-proxy-middleware')

module.exports = (app) => {
  app.use(
    proxy('/.netlify/functions/', {
      target: 'http://localhost:9000/',
      pathRewrite: {
        '^/\\.netlify/functions': '',
      },
    }),
  )
}

And looks like everything is working, or I’m missing anything?

#3

Right spoke to soon don’t know why i thought it was working :smiley:

when i access localhost:9000 i get this

You have requested the root of http://localhost:9000. This is likely a mistake. netlify-lambda serves functions at http://localhost:9000/.netlify/functions/your-function-name; please fix your code.
#4

hey marius,

I’m not sure its actually possible for two things to run on the same port, seems to be a hotly debated question here:

You’d definitely want to find a way to get this working locally, if its possible, but I’m not sure we can confirm or deny this will work on our service at this time.

#5

Right i see, make sense.

Hm then is it possible to have my start:lambda running but i want also to have a React page being displayed at the same time? Maybe i can’t run them at the same time as different app’s but how can i tell then my dev environment lambda to serve the React page?

#6

From what it looks like i just need to use Netlify Dev

#7

Hey Marius,

Does our template help at all?