Provide API to integrate with custom servers

The main problem I have so far is that I have my own node server for the backend. I could run both that and the create-react-app server, but I think we’ve learned from webpack’s dev server that it’s not ideal to have to manage 2 processes.

Would you be open to exposing an API for this project in addition to the CLI? One option is for it to take an express server and add all the url handlers, but then you’re binding yourself down to express which you probably don’t want. Of course, if you moved away from express it’d be impossible to integrate with existing express servers anyway.

Isn’t there a way for node’s low-level http servers to be composed? If so, you could make sure that requests go through the dev server first, and then through the user’s server. Theoretically that means the types of server’s don’t have to match (the dev server could be using express, the user’s hapi).

[jlongster]

Ok, sorry. I subconsciously assumed that others would relate to these problems as well. But note that some preferences come from general experience and hard to convey like this. I’ve enjoyed working with simpler dev servers in ways that I can’t really explain if others don’t have the same experiences.

One problem I can detail is this:

1. I have a server running on port 4000, and it provides an API and serves an index.html.
2. I run react-scripts start which listens on port 3000
3. Going to http://localhost:4000/index.html can’t find the bundle because it’s trying to load like this: <script src="/bundle.js"></script>, which resolves to http://localhost:4000/bundle.js.
4. The bundle is served from http://localhost:3000/bundle.js in dev, so it needs to load it from there. But I can’t hardcode that URL, because it needs to be /bundle.js in prod. So it needs to dynamically check for the dev environment and use a templating system, like {% if DEV %}http://localhost:3000/bundle.js{% else %}/bundle.js{% endif %}.

Now, I could just load index.html from the webpack dev server. Then it would go like this:

1. API server is on port 4000
2. dev server listening on port 3000
3. Now I go to http://localhost:3000/index.html. The relative reference to the bundle /bundle.js works fine.
4. However, my code posts to the API with relative URLs like /get-items, which is now resolving to http://localhost:3000/get-items. So all my API calls aren’t working.
5. I need to provide a constant API_SERVER that I need to require everywhere I make an API call, and do API_SERVER + /get-items. Or I could wrap all my calls in a function that automatically prefix that URL.

But I don’t need that complexity. My site will never be big enough to require the ability to separate out the API server, so I just don’t need to do that. I also don’t need the complexity of using a templating system to make index.html dynamic.

So, sure, I could solve this either way. But it’s additional complexity that I don’t really feel like dealing with.

I’m fine if you all choose not to do this. It’s your project, and you should execute your vision, and I fully respect that. If it’s important enough to me to reap the benefits of it, eventually I’ll try to figure this out. I would prefer the ability to simply integrate it though.

[curran]

I ended up solving the NGINX configuration. Here’s what worked for me in case others are also struggling:

server {

    location / {
        proxy_pass http://localhost:3000;
    }

    location /api {
        proxy_pass http://localhost:8080;
    }

    # Handle WebSockets.
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
}

The above is the complete contents of the file /etc/nginx/sites-enabled/default (in Ubuntu).

This configuration:

• serves on port 80,
• proxies requests under /api to the custom server running on port 8080,
• proxies all other requests to the Webpack dev server running on port 3000,
• supports WebSockets for the dev server live-reloading, and
• supports WebSockets API connections under /api.

Draws from:

• NGINX Beginners Guide: Setting Up a Simple Proxy Server - For proxy configuration.
• StackOverflow: Node.js + Nginx - What now? - for WebSocket support.