I'm new to back-end coding, and I'm struggling to understand exactly what a "fullstack" app would look like.
Is it:
A Node-Express server that serves index.html, which has <script src="main.jsx"></script> in it (If this is the case, how would the .jsx content get compiled into browser-ready javascript?)
A Node-Express server that serves some data (.json) + a frontend app (that you would initialize with Vite or CRA) that fetches from said server?
Both are currect , your server can serve content to the cliend (first case) or send data to the client (json , xml or etc).
Note that when you are working with react and .jsx component you have to build your project and server the html file (including js , css) via express server
Related
I am new to reactJS. I am working on project which uses following :
Front-end : ReactJS
Backend : NodeJS (Express)
Front-end runs on port 3000
Back-end runs on port 8088.
I am planning to deploy application on amazon AWS.
What i am trying to do is load reactJS front-end when i make request on http://localhost:8088/
I know using axios we can make request on backend server and display fetched data.
What would be standard way of loading ReactJS front from the nodeJS ?
I'm not sure if this is the answer you are looking for, but generally in development you use something called proxy in your package.json in the client (react) folder:
{
// Other stuff
"proxy": "http://localhost:8088"
}
and then when you'd want to deploy you'd run npm build for your react folder and serve that generated folder called build. But as I said, you usually do that only when deploying your application onto server, not the actual development.
Also I'd suggest checking some of these videos, that are focused on deployment, because that is what I think you are asking, right ?
I'm trying to understand how to properly publish a node application. I have an angular 2 application which after build creates a www folder. I've uploaded the folder to my hosting company which uses plesk for a control panel.
For non-angular applications I would point the node entry point to file which tells node where and how to start :
const http = require('http');
http.createServer(function(request, response) {
response.writeHead(200, {'Content-Type': 'text/html'});
response.end('<H1>Hello World!</H1>');
}).listen(process.env.PORT);
I'm confused on what the entry point for an angular 2 application would be?
When I navigate to my index.html file it appear to serve the file and mostly work, but shouldn't I have an entry point which is a js file?
Angular applications need Node.js (NPM) to be installed and built, but after they are built, they don't depend on Node.js as web server - as long as SSR (server-side rendering, aka Angular Unversal) isn't needed.
Angular application can be served by any web server (IIS, Apache, Nginx, etc) that was properly configured to serve SPA (single page application). If HTML5 routing is involved, this needs index file to be served for router path.
I work on an webapp which use REACT JS (with NODE, port 3000) and an API (with NODE JS, port 3100).
All requests made by client passing throught my API.
In this app, client could be able to listen mp3s downloaded and stored into my API. I made different schemas but I don't know which one can work.
SCHEMA 1.
REACT send parameters to API
API download the file and store it on a temporary directory
API send the URL (like : http://localhost:3100/sound/exemple.mp3) to REACT
REACT use that URL in 'src' of the AudioPlayer
Temporary files are delete with a CRON setting up on API server
I tried that solution but I have an error when I want to play the sound
(error: Can't GET /URL)
SCHEMA 2.
REACT send parameters to API
API download the file and store it on a temporary directory
REACT download the file from API and store it into public directory (by using express static)
REACT use that URL in 'src' of the AudioPlayer
Delete the file twice (API and REACT)
Another solution is to download the file directly from my source on REACT. But I need to hide the URL of the source (that why I pass throught my API).
Maybe there are others solutions ?
I am using angularjs2 with the lite-server and nodejs with express, when i am running my express server on port 3000, and navigate to that in the browser i get the HTML on the DOM as expected, but when i would navigate to a different path eg. localhost:3000/my_route, and maybe refresh later, i receive the expected response from the server but i do not get the HTML.This is how i configure express to get the index.html in the client side
app.use(express.static(path.join(__dirname, 'client')));
I am using systemjs as module for angularjs2, can you guys please assist me with the appropriate setup, for nodejs/expressjs and angularjs2.
Thanks.
For example, let's say we're trying to use socket.io.
In the html file served to the client, we include the following in the file.
<script src="/socket.io/socket.io.js"></script>
So two questions regarding this:
When the html file gets served to the client, it loads the socket.io.js resource (http://localhost:8080/socket.io/socket.io.js) without triggering the requestHandler in server.js (I have a log statement for any request that hits localhost:8080). How does this resource load on the client without triggering the requestHandler?
Where does Node find the socket.io.js resource that is required by the client?
Assuming you are using one of the basic Socket.io examples, this is because Socket.io overrides your handle with it's own and won't run your handler if the request is for something that socket.io manages.
When you call .listen(app) or .listen(80) it will set up all of the handlers it needs to process data and serve the client JS file.