Lightrun
question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Instructions on hooking up to react-starter-kit

See original GitHub issue

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.

<bountysource-plugin>

Want to back this issue? Post a bounty on it! We accept bounties via Bountysource. </bountysource-plugin>

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:3
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
cmmartincommented, Jun 28, 2017

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

1reaction
tim-softcommented, Jun 26, 2017

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting Started - React
When starting a React project, a simple HTML page with script tags might still be the best option. It only takes a minute...
Read more >
react-starter-kit/README.md - GitHub
Builds the app for production to the build folder. It correctly bundles React in production mode and optimizes the build for the best...
Read more >
How To Set Up a React Project with Create React App
js on Ubuntu 18.04. It will also help to have a basic understanding of JavaScript, which you can find in the How To...
Read more >
Learn React with the React Starter Kit | by Gareth Wilson | Glitch
And we look at 3 remixable example apps that use React and explain the code that's used in them. To help us, we've...
Read more >
React JS Setup, Installation and First React Project Creation
In this video we will discuss1. React Installation and Setup2. NodeJs and NPM Installation3. Create- React -App tool Installation4.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found
Previous page

docker-compose up fails when run on a docker version 1.7 up of installed through docker toolbox on win 7

Next page

overriding Route type when initializing UniversalRouter