Some years ago I implemented a websocket (Ruby based) on a intranet website to create a one direction message system. Admin types a message and all the clients that are registered on that channel get the message.
It is working well but now that I'm approaching REACTJS I am thinking about replacing the Ruby websocket with a React component.
Starting from an Apache webserver running php and a Ruby websocket in parallel to it what do I have to do to set up an environment running react?
Install Node on Ubuntu?
Install NPM?
What else?
On react side I'm currently learning the basics and I have not approached yet the differences in terms of application beside a compiled app and the dev version. So I expect that also the compiled version will require the same environment as when I am developing. Am I right?
React is solely a front-end/client-side technology, so it has very little to do with the server.
If you develop a React app using something like create-react-app, the development environment they provide allows you to disregard the backend/server-side while you develop. It does this by serving the files on a local webserver.
If you have a server that makes a web socket available, your React component can connect to it and use it.
After development the React code must be transpiled, and all you need is to serve the static files. For example you might end up with a chat.html file that uses styles.css and connect.js, and you'll need a server to respond to requests for those files.
So I would say that if you already have an exposed web socket, you do not need a new production environment on your server.
*If you intend to build a new websocket on Node or if you need to build yourself an additional REST API that's going to require setting up a Node environment on your server*
Related
As the title says, I have a React "Create-React-App" project, run with npm. It is a flight data website.
The current setup is that it communicates with a Java WebSocket server. Previously, an Android app communicated with this WebSocket server and sensors would communicate with the phone to get to the website.
Now, I have replaced the phone with an Arduino Nano to reduce latency, and I'm wondering what the best pathway between the React project and a USB-plugged-in Arduino is. Obviously the Arduino has to communicate via serial. I have tried using the node serialport package in the React project but it does not work, as detailed here: https://github.com/serialport/node-serialport/issues/2297
One succesful pathway I've found is Arduino -> Python script that can read and write to serial, read and write as a Websocket Client -> Java Websocket Server -> React app.
I chose Python because it is my main language, whereas the Java server and React app are legacy code. The problem with this implementation is that I need 4 IDEs (Arduino, Python, Java, React) to develop and I have to run each package separately, so it is not convenient.
I'm looking for a shorter path. The Java server can die, but the React app and Arduino cannot. Any advice?
i have got a problem, which i am trying to find a solution for weeks now.
I think it´s an understanding error on my side, but i couldn't figure it out.
What i am trying to do:
Develop, not deploy, a react app on an Apache2 server.
I know that react is an frontend library, so it should be possible to do.
I also know that nodeJs is kinda required to "npm" all the packages and to create the "Simple" react app..
What i want also to do:
Use the MATERIAL-UI
Build a PHP Backend
Collaborate with my Team Members (they should also work on the react app)
Thanks in advance.
Hosting a ReactJS App is no different than hosting any other javascript code on any type of server - by having it as a static file on your web server and including it in the html returned from the server.
Depending on the way your React project is set up, you would:
use node to build a javascript bundle of your react app (possibly by running "npm run build" in any CLI),
include the resulting script file or files in the head element of your root or master template
Make the Apache web server return the needed page with the master template where the script tag is
Additional setup could include starting the PHP server and react development build at the same time, but that is highly specific on your setup and would require you to add some more information on used frameworks and setup.
It is not possible to deploy apps with Apache and React. The nodejs based- Webpack server is incompatible with Apache web server. You'll have to pick one server or another, you can not route index.html -> index.tsx and vice versa. Besides if you ever got both servers working in tandem with SSL, it's a technically security nightmare and has no production value. It's best to avoid java(script) all together as it's merit in real software development has greatly diminished. Mostly for gold diggers.
To begin with - let us suppose we have a React application. We want to build it and deploy to 3 environments - dev, test and production. As every front-end app it needs to call some APIs. API addresses will vary between the environments. So they should be stored as environment variables.
As every modern, progressive developer we want to use containers. In particular Kubernetes.
We want to build our web application and deploy it on K8S cluster. The container image should be built and kind of sealed for changes, then before deployment to each particular environment the variables should be injected.
But it seems there's one great impossibility here. When it comes to .NET apps for example, when we have .dll compiled, it reads a config file in the runtime. It's not a case with React. After we generate build we have just static files. The variables are changed to static values in the process of building React app. It seems there's no way to update it after that point - or is it?
The way you are trying to solve your problem is not correct.
You don't need to know anything about the addresses of the backend services in your react app. Only the frontend server/gateway that is serving your react app needs to know about the backend services. Any request from the react app should be proxied via the gateway.
See API gateway pattern - https://microservices.io/patterns/apigateway.html
You can use config map to store the API endpoint address and refer it as environment variable in the pod.
If you want to change some values while the pod is running you can mount the config map and any change to it will be synced in the pod
I created a React application using Create-React-App and npm.
I intended to simply build it with npm run build, and somehow host the produced build in a windows server.
This windows server doesn't have any internet connection (but I have admin right so I can install offline packages), then I tried :
Hosting the built folder wihth IIS which didn't work (I couldn't find
any good documentation on that)
Packing the "serve" npm package to install it in the server (serve having
a huge amount of dependencies, it's really difficult to get an
offline package)
None of this seems to work... Any suggestion ?
One way of doing it:
1.Install NodeJS on Win Server that has Internet connection.
2. Install Express on that server and get your React app to work with Express.
You might want to look for Express-React boilerplate to save time. I wrote such a boilerplate though it's written in TypeScript. There are others.
3. Copy NodeJS installer and Express installation to the server without Internet connection. Install Node. Then you can optionally use IIS as a proxy for better security.
Another (and more involved) way:
Instead of copying the Express installation, create a Docker container out of it. Then enable Hyper-V on the server without Internet connection and run the container there.
Yet another way (I don't recommend it):
Let IIS create NodeJS run-time environment while serving incoming request using iisnode as described here.
P.S.
Using Express won’t add SSR to your React app. An SPA needs some server-side logic from the server. That's what I meant when suggested get your React app to work with Express. The logic includes mapping and redirects.
IIS has very powerful and flexible configuration and both mapping and redirects could likely be done declaratively by typing the configuration settings including regex(es). I never tried but have feeling this is possible. However it might be a challenge to find instructions about that online. The other way to do the mapping and redirects is programmatically rather than declaratively. Instead of writing it in C# for example, you can do it in JS or TypeScript, utilize Express and add IIS as a proxy.
What mapping and redirects are needed?
Mapping: Map the path /static/js/*.js to the physical folder where the script bundles are. CRA puts the bundles into my-cra-app/build/static/js directory. Note 1: You might want to double check that in the index.html file generated by CRA the path to script bundles (found at the bottom of the file) is indeed /static/js/<bundle>.js. Note 2: Better security would be achieved if the mapping is not wildcarded, rather more restricted e.g. it checks for a pattern match that includes the bundle name(s).
Redirects: Needed to implement the fallback required by all SPAs. The fallback is automatically added by CRA to webpack-dev-server. When people do deployment then in cases when they move from webpack-dev-server to Express or other server, they frequently skip the fallback which is mentioned here as the 3rd pitfall of React-Express integration.
I am trying to understand React to possibly create an app for Production purposes.
I am used to creating an Node Express app, and with Express if we want https we require https and in the https.createserver() we provide a path to our pem file from our CA and our passphrase to access it.
Do we not have this option to use a CA Certificate file for React? Or since it is just a UI does it not need it?
Say I have an Express API, I created using https that I can get information from using postman with no problems, and I want my React App to access my API. Is the only thing I will need to get info from my api the proxy line in my react package.json file pointing to https://api.to.call.com? I thought it was bad practiced to post or get to https server from http.
Plus I just read that Create-React-App should not be used for production. Then what am I supposed to use for production? Is there a Create-React-Production-App? Or is this something else I need to add to my express server? I am very confused about the entire setup.
React is a front-end library. As such, it has nothing to do with SSL certificates, since in the end it's just javascript code that runs inside the client interface (i.e. a browser).
React is also agnostic when it comes to your back-end. It can be Node/Express, Rails, Python, PHP, your front-end really doesn't care, all it will see is an API that provides data (usually in the JSON form) upon request.
You do not have to serve your API and your front-end files from the same server - you can, but it's a matter of preference. And to access your API from your front-end, you can use one of several npm packages, Axios is a great one, there are others (Fetch, ...) ; all you have to do is hookup your API calls using the same URLs you used in Postman in the components that require them.
As for Create-React-App, it's a nice helper tool, but I would recommend learning a bit about the React ecosystem rather than rely blindly on it. The trickiest part is probably the Webpack configuration, but once you get the hang of it, everything becomes a lot easier. There are also newer tools like poi that can do a lot of the grunt work for you. With Webpack, you can have a dev configuration (hot reloading dev server, etc.) and a production configuration (that will output your production build JS, HTML, CSS, can optimize with chunking, etc.).
I'm not very familiar with Create-React-App (I prefer to use my own boilerplate projects), but if I'm not mistaken, there is a possibility for you to access full customization of your project, see here. Be warned however, it's a one-way operation.