This is the most basic question.
In every online example I see, to get a website running with NodeJS and React two seperate programs/servers are created. One runs on port 3000 and the other on 3001. Is this necessary?
If react is a frontend engine why does it have to run on a port or a server?
Im confused as to why they always use create-react-app which may be running on its own server im not sure.
I would like to create app.js import 'express' to handle requests and also import React on the same file, but I run into compilation errors, will this approach work?
Is this necessary?
No, this isn't ever necessary and is only typically done in development.
If react is a frontend engine why does it have to run on a port or a server?
Webpack (the thing typically bundling your React code for browser usage, similar tools are vite/snowpack) creates a server for live updates and errors so changes in your React automatically propagate to the UI.
This is only done during development and not in production. It's a convenience feature while developing the code.
I would like to create app.js import 'express' to handle requests and also import React on the same file, but I run into compilation errors, will this approach work?
Frontend code usually has a build step where you run npm run build which runs webpack --production over your code (or esbuild or other similar tools). After this point all your frontend code is typically static files (.js .html .css etc) from which point you just serve them from static file storage (usually a CDN for faster load times in different geographies).
Related
When Node js and react are used in a project at the same time, does server side rendering happen? I'm new to this. that is, pages such as (about, contact) are created with react and then the server is written by node js and when the request is received, pages such as about, contact are directed to the user, so this is the process when using react with node?
When Node js and react are used in a project at the same time, does server side rendering happen?
Maybe, but not necessarily.
If you have a React project with SSR then you almost certainly will be using Node.js (probably with the Next.js framework) to perform the SSR.
However, you could have an application without SRR that used Node.js at runtime (e.g. to provide a webservice) and any React application is likely to use Node.js at build-time (e.g. to run Babel and Webpack to prepare the application for deployment).
When Nodejs server and React are running at same time,
If there are 2 pages About.js and Contact.js
About page
About page is accessed through REACT-ROUTER-DOM and likewise Contact page is also through REACT-ROUTER-DOM.
About.js
React main page for routing and continuation part(react routing continuation)
THIS IS THE NODEJS SERVER BELOW
By getting
Nodejs generate about contact
Nodejs code link
So after that we will place this local application programming interface in react components by given below
react code link
So in this page I have used AXIOS to fetch the data from the application programming interface
NPM INSTALL AXIOS in react and it would be blocked by CORS Policy to avoid that we can install NPM INSTALL CORS and require it in NODEJS server.
Now I am running the server together and using react hooks I am able to get the data passed from application programming interface
About page and contact page.
Following my previous question, I have followed webpack guidelines of using multiple targets to build my NPM package. https://webpack.js.org/concepts/targets/#multiple-targets
I now have two different output files, index.js which is the browser bundle and index.node.js which is obviously supposed to run on the backend.
The app should run on both browser and Node, the code is mostly reused but there is some big difference around accessing files etc. which means I do need two separate files depending on what platform should the app run.
My question is how should I publish this library in a way that user can consume it like import {//SOME OBJECT} from 'my-published-library' when they import it from NPM regardless if they are using it on the browser or in their node application? If I try that at the moment it always defaults to index.js which works in the browser but not in Node.
Not sure if this is what you're looking for but if you are installing for the browser, the package.json provides a field to set the entry point.
https://docs.npmjs.com/files/package.json#browser
Is there any way to setup local development environment with React at front-end and a full-stack server (e.g. WAMP)?
The perfect case is to:
Use the default React Create App setup without ejecting scripts
Make AJAX calls to PHP files which will handle the queries to MySQL database
Questions:
Is it possible to just run WAMP at localhost:3000 and React yarn start at localhost:3002 (it auto-sets different IP) and then just put PHP files somewhere inside src folder and call them from JSX using one of the AJAX technologies (e.g. jQuery or native XMLHttpRequest)?
Or the only way is to eject the scripts and then build and put files inside WAMP's /www/project folder and then use custom tools to update all this stuff at WAMP's localhost address?
EDIT: putting react app into /wamp/www is not an option - it didn' work for me and I don't want to put more efforts into it. Running React and WAMP in on localhost seems to work, the question to answer is:
How to import the PHP file into JSX. Trying to call it with smth like: require('./foo.php') does not work. import foo from ./foo.php didn't work either. Anly ideas?
After investigation I have found a way to achieve my goal.
The key to be able to send request to any local server you use (Apache, Nginx, Node.js) it to use ReactJS proxy feature:
https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development
After adding "proxy": "http://localhost" to my package.json file I was able to send and receive requests to my WAMP server while keeping all React's Create App native scripts.
P.S. It turned out Facebook has a nice React-native tool for request called fetch - https://facebook.github.io/react-native/docs/network.html.
1) I strongly recommend you do try to do this :
Separation of concerns is very important. having two repositories for your application, one for the backend and one for the front end is very important. Especially if you are using a versioning system, and more importantly, if you plan on working on it in a team. I suggest you just have your wamp installation stay where it is, add a Vhost like : backend.my-project.com, and then run your react app normally, and use the env.local in cra file to store the URL of your backend app using the environment variables.
2) You do not need to eject scripts to have both your frontend and backend in the same place :
Either create-react-app inside your wamp folder, or point your wamp folder to your create-reac-app generated react app
I am trying to make a React app created with react create app to do server side rendering.
The project uses es6 and imports, which node doesn't seem to support yet.
What would be an easy way to have the server side rendering "work"?
I've tried:
compiling the js using babel and running it with express JS
works, but I don't get the correct backtrace pointing to the source files, it points to the compiled file (maybe a sourcemap would help?)
running the server with express JS and changing imports to requires and removing class constants inside the class body to make it compatible with what node.js can run
running it with babel-node - sounds good, but I haven't been able to make this
work at all
Since there are multiple ways to go about it, I am wondering what is the best practice so I don't paint myself into a corner.
The project uses es6 and imports, which node doesn't seem to support
yet.
Can be solved with babel.
// index.js
require("babel-register");
require("./server");
// server.js
import express from 'express'
// ^^^ new-style import works :)
I don't remember having any problems with incorrect backtraces using babel this way.
I use webpack to bundle my React app, it emits static files like the index.html, app.js, vendors.js and resource files. Then I simply throw them to a nginx server, and it works. Now I just start playing with Electron, and I can start a dev server for the app and then start electron, so it works. But I'm wondering how do I make it to production and package it. Do I also need a server to run my app? Like having a naught server to support my app in the electron environment...than what if the server is down, I don't think that's the solution. However, if I simply throw the static files into the electron environment, it reads the js files, but doesn't run it.