I am working on a project that requires developing a SPA using React, Node and Express. I understand Node/Express can serve static files and so my initial thought was I will write a react app and serve it via Express server.
But my Node/Express server also has other roles like, connecting with other microservices and fetch data, which will eventually passed to the UI controlled by react SPA.Sort of a controller! I am also planning to use Graphql instead of Rest.
Will the approach of using the Express server to do both serving the SPA and as a controller has any complication, or should I separate them as two different webapps.
I couldn't find many usecases for my first approach (keeping both together),but I could see that splitting them as two,like here https://dev-blog.apollodata.com/full-stack-react-graphql-tutorial-582ac8d24e3b
Any suggestions on what is the right approach?
Thanks
If you just wanna serve a static file you can use Amazon S3 bucket to serve your React app and throw a a CDN in front of it for optimal load times.
Its nice to keep the separated but it also depends on the size and scope of the project. If you wanna expand it later it might hurt that your API is also serving the app and all its assets.
Where as separating them will split the load from actual API usage and static asset requests (images, index.html ect...).
Related
I am pretty experienced with NodeJs and Express, but I'm a beginner in ReactJS.
I usually use ejs and deploy my server on Express like this and route server-side.
app.get("/", (req, res) => res.render("index.ejs");
app.get("/contact", (req, res) => res.render("contact.ejs", { data: data });
Something like this.
However, working with React (create react app), I find myself not using express at all for routing and only serve an API.
Create React App apparently already has a server (localhost:3000 by default) and I can perform client side routing directly there.
Should I deploy my server on a client-side framework, React?
I don't even need to serve static files on express.
Hope you understood me, thank you for your help :)
First of all react is a library and second of all, when you say that it has a server that means it's a development server, for reviewing the results while you're working on it locally (means when you are building your application, you need to see how it looks in real-time). It's not for production use or included in the build output. Now let's say your application is ready and you want to deploy it, then you run a build command which does the following for you
transpiles JS code
bundles code and assets
uses cache busting techniques for assets
removes dead code
and you will deploy your application on a server, so that it can be accessible to clients
I don't need to serve static files on express, explanation below
In modern-day websites, we don't have to use views because react comes into the picture and takes care of the clientside-UI that the user interacts with, so you are right that we don't have to use static files in express anymore but if you have a use case where you have to use it then you can use it, no one is stopping your from doing that
and lastly you can have your own node js server as well which your front end will be talking too, not for views but for data that is stored in database that you want to fetch and display it to the user
React by itself just create static html-css-js files, but for testing purposes, they have also included this handy way (localhost:3000 pipeline) to view the built files. Technically you don't need to use it, just use the build script, then set up an express server to serve the files from "build" folder, and it does the same thing.
About client side routing, basically what happens is the entire page gets downloaded client-side, and it uses the value in url box to show or switch to certain screens. This is why its called "Single Page Application", you are serving a single page to the client upfront with all the static code. Compare this to express-ejs where you serve static code conditionally, depending on the address.
Take a look at CRA's docs for more info about deployment.
I'm new to Apollo and JS on the server, but not new to React, GraphQL, etc. I'm trying to wrap my head around a clean way of having the server serve both the API, using Apollo, but also the client, which would be built with ReactJS and also Apollo.
I read the article on server-side rendering for Apollo. I might be interested in that in the future, but right now, I'm only interested in having a single project, deployed from a single server, instead of two.
Is it possible to do this cleanly? Is there a canonical way of doing it? can it use create-react-app or is that out of the question?
If you're not doing server-side rendering and just want to serve a Single Page Application (SPA) like what's built with CRA, you can do so using pretty much any HTTP framework or even without one. CRA just builds some static content for you, which you can serve using, for example, Express (see docs here). However, it's typically better to utilize Nginx or Apache for serving this content (at least in production). If you want to utilize Express or another HTTP framework to serve the files, you can utilize the appropriate integration for Apollo Server. If you're using Nginx, then you can stick with the standalone library, assuming you don't want to expose any additional routes on your HTTP server.
In development, you don't want to have to constantly manually rebuild your React application when you make changes, so CRA actually runs a server for you that serves the app and enables hot reloading. Because this is a separate server from your API server, you'll typically want to enable proxying your requests to the API.
It's possible, the setup for apollo is the same as any server, for example, you can use express to serve static files and implement apollo with some minor changes see the docs for apollo server express and implement the one that you are familiar with
I have an existing backend with a REST API written using node.js/express.
I can call urls e.g. /getallhouses and get the corresponding JSON object.
Using a mobile app, this is rather straightforward as you just call the REST API and process the data.
As I need to also add a webapp e.g. with React.js, it seems more murky.
What is the best way of implementing this webapp strategy?
Creating a stand-alone react.js app which will be called by the user first and then is using the REST API like a mobile app and hosting that react.js app on a different server?
Or is it better to start from the already existing express/node backend and serving the initial index.html file by
res.sendFile(path.join(__dirname + 'views/index.html'));
and putting all react.js related code into views and letting the backend serving the required react.js app to the user?
The best way is probably that you create a react app with redux and compile it to a bundle with something like webpack. Then you could host your page completely static.
I'm currently working on a new ReactJS application. In all the previous applications I've built I used Express for the server side rendering. I used Express because routing in production mode wouldn't work if I didn't.
So I've recently discovered that it's posible to just always redirect my React app to my index.html file and let the React routing just do it's work. This also works when I deploy my application to production.
I know Express can be usefull for SEO porposes but other than that I have no idea why I would need to use it. So am I just missing something? Or is it just fine to don't use Express with my React application if I don't need any SEO.
React configured as a Single Page App, renders the express routing all but unnecessary. The standard transition from a web server rendered app to a single page app is to change the server into a REST Web API and any server side data needed from the React App is obtained through AJAX calls.
So in most cases you don't need Express when you are using React to handle your routing except for in less common cases when you might want to use express as a reverse proxy or something.
If you want to do server-side rendering, you'll need a node server (typically but doesn't have to be express) to render your React components. This could not only help with SEO but also allow your page to appear to load faster (you wouldn't have to wait for the JS to download and run before the user sees the HTML).
If you don't care about the benefits, don't use SSR.
when deploying react application it is just usually an html and a JS file. So you need some kind of server to host it. Luckily there are services out there that offers that like S3, Github etc.
You're using Express because it can host the html and js files. So technically you don't need specifically express but you need some server that will host your files.
I'm trying to understand how a MERN app fully works, I've been reading about MongoDB, ExpressJs, ReactJs and NodeJs, I also understand how MongoDB, ExpressJs and NodeJs interact and how ReactJs works on its own, my question is simple (I think).
The question:
If I create an API, using Node,Express and Mongo, and I have an APP managed by React, both need a server (via express, I understand), then, how should I run the API and the React app at the same time. Do I need different URLs? should I configure different ports? how should I integrate them?
I really been reading a lot, but almost every tutorial is made locally (and I'm working in a server with Passenger and I can't change the way it starts), just for Node/Express(with pug or else)/Mongo or just React, and I don't understand how to connect the API and React.
Thanks
It depends on several factors: environment (e.g. development, production), and your control over the server. For development, you can have two different URLs and use something like Webpack Dev Server. Normally you would have the module bundler, e.g. Webpack, watching for changes in your React code. However, this can get more complex if you have Server Side Rendering.
For production, normally you would have the bundled file for your client side application already optimized and minified. If you can change your API, you could serve it statically in a new endpoint, for example: /static/bundle.js and request this endpoint from your index.html file, which will be sent by Express.js server when accessing /.
However, because you will probably want to have routes in your React app, your server will need to know how to handle the client app routes (for example app.get('/*', () => ...), and they could collide with your API endpoints. To solve this, you could:
Prefix your API endpoints with a namespace, e.g. /api/v1/...
Place the API in a different URL, port or subdomain. In this case you would indeed need to run these two servers in parallel. With Node.js, there are helpers to make this more convenient, e.g. concurrently.
Pulling out your concerns: API, React, and Integration for MERN app.
I use three approaches
1) Use foreman. With this, you can specify your API and Web Client in the Procfile. I used it here
2) Use a proxy to handle requests that require your API. So in package.json, you specify your API URL(your API must be running)
// package.json
.......
.......
"proxy": "<path to url:[port no if you're developing locally]>"
Check here.
And you can simply add a script to run your API and React concurrently.
3) Set your API and React app in a Docker container. mern-starter is a perfect place to check for this.
Hope this helps!