serve app under homepage

[kellyrmilligan]

No description provided.

[kellyrmilligan]

@Timer for 2.0, this feature, what else do I need to put into this? webpack serve as well? how do we want to proceed?

[Timer]

We'll have a better idea after the webpack-serve cut over. You're more than welcome to take a stab at it if you'd like.

[kellyrmilligan]

So cra is definitely switching to serve for 2.0 then? I guess let me know if you want to get a version working where it’s the same as current next or if this can be merged first then brought over with serve. This feature is blocking all of my apps from being put back into cra ATM. Had to eject to just run them all at the same time behind an Apache proxy and I’d rather not be ejected. It seems like others want this functionality as well. Please let me know the best way I can help with this, as it’s coming up on a full year for this feature.

[jeremygiberson]

How do I support deploying to more than 2 environments (dev/prod)? I've got local(dev), integration, stage, prod. This gives me domains like dev.mysite.com, test.mysite.com and mysite.com.

If that is not supported, is there any chance to move the value out from package.json homepage and into a .env value instead?

[itsjoekent]

Any updates on merging this?

[kellyrmilligan]

just merged the latest next branch. @gaearon @Timer where should I leave this pr? I am moving to a different company shortly, and may not have need of this anymore. I want to see it through, but i'm not really sure where to go next. my main questions are:

• is CRA for 2.0 also using webpack 4? because webpack-serve requires webpack 4
• if not webpack 4, then do we want this as part of 2.0 with webpack 3.0?
• I was trying to use webpack 4 on a separate project, and ran into the issue that extract text isn't webpack 4 compatible:
  Webpack 4 compatibility webpack-contrib/extract-text-webpack-plugin#701
• so is the thought that CRA will use this instead if using webpack 4?
  https://github.com/webpack-contrib/mini-css-extract-plugin

a slew of interconnected issues as always 😄

[kellyrmilligan]

@Timer can we put this pr in the 2.0 project list? The old PR was closed and is there, maybe this new one is under the maybe category?

[mcMickJuice]

FYI one problem I ran into with this implementation is proxying api requests through webpack:

const proxy = {
      '/scheduling': {
        target: 'http://localhost:3001',
        pathRewrite: { '^/scheduling': '' },
      },
      '/api': {
        target: 'http://another-api-endpoint',
      },
      '/app': {
        target: 'http://someapp.endpoint',
      },
    }

    const proxyConfig = prepareProxy(proxy, paths.appPublic)

When accessing the app at localhost:3000/route the api requests that should be proxied fail as they are being redirected to servedPathPathName (as dictated in serveAppMiddleware). The workaround here was to pass in the proxyKeys and respect those as well as the servedPathPathName:

module.exports = function createServeAppMiddleware(
  servedPathPathname,
  proxyKeys = []
) {
  function matchesProxyOrServedPathName(requestUrl) {
    const matchesServedPathName = requestUrl.indexOf(servedPathPathname) !== -1

    const matchesProxy =
      matchesServedPathName ||
      proxyKeys.some(key => {
        return requestUrl.startsWith(key)
      })

    return matchesServedPathName || matchesProxy
  }

  return function serveAppMiddleware(req, res, next) {
    if (servedPathPathname.length > 1 && servedPathPathname !== './') {
      if (matchesProxyOrServedPathName(req.url) === false) {
        res.redirect(servedPathPathname)
      } else {
        next()
      }
    } else {
      next()
    }
  }
}

Note that I'm running into this issue after I ejected from CRA and I basically lifted all of your changes into my app locally. This might not be an issue with current version of next and these changes but thought I'd mention them in case this use case hasn't been tested.

[kelly-tock]

Thanks for this. I am at a new job now, and with webpack 4 this PR is now old and need to be redone. I think at this point i need to let this PR die yet again, and someone can start anew when the webpack 4 release is cut.

[kelly-tock]

I haven't used CRA in a while, is this supported now officially in the latest release?

[davidroeca]

@gaearon was this PR was closed due to this feature being added elsewhere? I’ve been following the related issues over the past few months and haven’t really contributed much to the discussion because I assumed people were working on this, as this PR was mentioned in numerous issues, and it has been periodically added and removed from milestones.

This is honestly the final feature that keeps me from ditching my own custom set ups. It will also free me and likely many others from the awful webpack-dev-server vs webpack-serve war if our custom setups need to rely on a non-root publicPath. Thanks for an awesome project!

[schotime]

Is this PR going to make it in?

[elyran]

+1

[ericclemmons]

I happened to toy around with this as well in:

#6135 (comment)

Unfortunately, I got blocked on weird behavior between InterpolateHtmlPlugin not replacing %PUBLIC_URL% when the devServer's publicPath was anything but /.

It seemed so simple at first!

[ericclemmons]

#6280 may replace this PR. 👀