GithubHelp home page GithubHelp logo

Comments (6)

cmmartin avatar cmmartin commented on May 1, 2024 2

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).

from relay-starter-kit.

tim-soft avatar tim-soft commented on May 1, 2024 1

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.

from relay-starter-kit.

tim-soft avatar tim-soft commented on May 1, 2024 1

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

from relay-starter-kit.

pruhstal avatar pruhstal commented on May 1, 2024

@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)

from relay-starter-kit.

pruhstal avatar pruhstal commented on May 1, 2024

@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).

from relay-starter-kit.

koistya avatar koistya commented on May 1, 2024
  1. Install http-proxy-middleware package in your CRA app project
  2. 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

from relay-starter-kit.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.