Instructions on hooking up to react-starter-kit

pruhstal commented 7 years ago

Hi there,

I recently cloned react-starter-kit from kriasoft and already started to build out my front-end with it. One thing I'd really love to do is use this nodejs-api-starter to communicate with the react-starter-kit, although I'm unsure of where to go. Most likely I'd need to modify the nginx proxy_pass, but need a little push in the right direction.

For now my workflow looks like: yarn start on react-starter-kit in one tab, and then docker-compose up -d in another tab which starts the API server.

My goal is to be able to build out all my REST endpoints on with the nodejs-api-starter and have my client talk to the react-starter-kit.

FWIW, I'm running react-starter-kit on port 3001 and the nodejs-api-starter runs on 8080.

--- Want to back this issue? **[Post a bounty on it!](https://www.bountysource.com/issues/46071951-instructions-on-hooking-up-to-react-starter-kit?utm_campaign=plugin&utm_content=tracker%2F47614326&utm_medium=issues&utm_source=github)** We accept bounties via [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F47614326&utm_medium=issues&utm_source=github).

tim-soft commented 7 years ago

This and RSK could pair together really nicely, I could see how a lot of people would want to keep the backend separate.

Is their a "Good Way" to swap the RSK backend to connect to this boilerplate? Maybe this isn't the right place to ask but definitely wanted to express interest with a bump.

pruhstal commented 7 years ago

@tim-soft Ideally, I'd like to have the node.js api starter kit powering my react starter kit (e.g. this repo).

Then I'd have maybe 3 servers:

1 API (https://github.com/kriasoft/nodejs-api-starter) 1 Client (https://github.com/kriasoft/react-starter-kit) 1 DB server (that proxies over to my API server)

tim-soft commented 7 years ago

I am actually working towards a very similar setup and use reverse-proxies via nginx

Here's a link that might help give you some more direction, although RSK has changed a lot since this PR

Remove data API endpoint from the boilerplate #1057

pruhstal commented 7 years ago

@tim-soft Awesome! Have you gotten that far at this point? I'd be curious to see how you're linking everything together.

The fact that this nodejs-api-start depends on Docker ultimately makes things a little more complicated IMO, as it's just another layer to deal with (although I do like Docker once everything works).

cmmartin commented 7 years ago

If you are running two separate servers for each project, you can easily communicate between these two projects over HTTP. Just send HTTP requests from the react-starter-kit client/server to this api running on another machine/port.

I wouldn't necessarily recommend that though, because the two projects have a lot of overlap. They both handle authentication and they both run a graphql server. That's a lot of redundancy. I would use one or the other. Basically, react-starter-kit is a full stack example and this is just a backend.

You can easily modify this project to also serve your front-end though. Just serve your front-end here. I'm doing something like this...

app.use('/public', express.static(path.resolve(__dirname, '../public')))

app.get('/', (req, res) => {
  res.send(`
  <!DOCTYPE html>
  <html>
    <head>
        <title>My API Starter Client</title>
    </head>
    <body>
      <div id="root"></div>
    </body>
    <script>
      window.__APP_INITIAL_STATE__ = ${JSON.stringify(initialState)}
    </script>
    <script src="/public/bundle.min.js"></script>
  </html>
  `)
})

Then you can generate your bundle.min.js file however you wish and place it in a /public folder in the root of this project. This file could be a react.js project or any other type of front-end angular, vue, whatever. react-starter-kit is just a more opinionated version of this that implements an isomorphic react.js client as well as the backend (and of course doesn't have any of the docker-compose awesomeness).

koistya commented 4 years ago

Install http-proxy-middleware package in your CRA app project
Create src/setupProxy.js file in the CRA project with the following contents:

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

module.exports = function(app) {
  app.use(
    '/graphql',
    proxy({
      target: 'http://localhost:8080',
      changeOrigin: true,
      router: {
        'test.127.0.0.1.xip.io:3000': 'https://test.example.com',
        'prod.127.0.0.1.xip.io:3000': 'https://example.com',
      },
    }),
  );
};

Front-end developers will be able to open the app without launching the API first, by opening this URL in the browser: http://test.127.0.0.1.xip.io:3000.

Optionally, consider using a mono-repo project structure, it works great with VS Code workspaces:

/example.api/ - GraphQL API and Auth (bootstrapped with Node.js API Starter Kit)
/example.web/ - Web front-end (bootstrapped CRA)
/example.mobile/ - Mobile app(s)
/example.code-workspace

kriasoft / graphql-starter-kit

Instructions on hooking up to react-starter-kit #39