Comments (6)
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.
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.
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.
@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.
@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.
- 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
from relay-starter-kit.
Related Issues (20)
- Adding controller/service layer for business logic HOT 3
- MongoDB instead of PostgreSQL HOT 1
- Where is the Passport.js implementation? HOT 1
- Dependabot can't resolve your JavaScript dependency files
- File Upload HOT 3
- Dependabot can't resolve your JavaScript dependency files
- Dependabot can't resolve your JavaScript dependency files
- big int HOT 1
- SyntaxError: Unexpected token = HOT 2
- Missing quotation marks in setup.js HOT 2
- Feature Request: "New Feature Walkthrough"
- Add the flexibility of multiple roles HOT 1
- Bug with emails that have "." in them breaks username requirements
- README.md out of date - no "setup" script HOT 3
- Nightly build fails
- Account settings page does not update
- docker image for the repo HOT 1
- error while run yarn setup HOT 1
- Readme.md has not been updated. HOT 1
- app-deploy.js file does not exists
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from relay-starter-kit.