React *create app* won't render when I go to localhost - node.js

Question

I have spun up a React app using create-react-app and have my index.js file as below.
import React{ReactDOM} from "react";
import App from "/componects/App.js";
ReactDOM.render(
<App/>,
document.getElementById('root')
);
My server.js file is as
const express = require('express');
const app = express();
app.get("/", function(req,res){
res.sendFile("fullpath/index.js")
});
app.listen(3000, function(){
console.log("app listening on port 3000");
})
I have checked my root route and it works when I don't send the full path. I do specify the full path in the code, but I want to keep it private for this post.
I do have a jsconfig file. When I go to localhost I receive all as plain text of the file. I only get the code itself. How can I fix this?

Answer 1

Quickly answer
You are totally wrong and you are confusing technologies: Node.js and React.
Usually you cannot mix these technologies.
As a summary, Node.js does not understand React code, that is why the following line in your code is unexpected, crazy and will fail:
res.sendFile("fullpath/index.js")
res.sendFile is for Node.js server-side rendering (SSR)
index.js is React code
If your create-react-app workspace is correct and standard, execute this line to start your react code in developer mode:
npm run start
If your react code is fine, the classic http://localhost:3000 will open on your local browser.
Long answer
Concepts
Server-side rendering (SSR) — the traditional rendering method, basically all of your page’s resources are housed on the server. Then, when the page is requested (commonly from web browsers), the HTML, JavaScript and CSS are downloaded. Also frameworks can dynamically can create the HTML-based on back end logic and finally download it. At this point, a lot of frameworks offer wonders for creating apps in no time with "amazing" functionalities.
Technologies: Java, C#, Python, Node.js, etc.
Client-side rendering (CSR) — Which is sometimes called "Frontend rendering" is a more recent kind of rendering method, this relies on JavaScript code executed on the client side (browser) via a JavaScript framework. So, when page is requested, a minimal, little or empty index.html, CSS and JavaScript content were downloaded. Here JavaScript is responsible to send or receive data and update a minimal section of the page without an entire page refresh.. Finally when user clicks or triggers some event, JavaScript code will send or receive the data commonly to an API REST (JSON) using an async call (Ajax).
Technologies: React, Angular, Vue.js, Aurelia, jQuery, pure JavaScript, etc.
Node.js
Is used in SSR frameworks
React.js
Is a CSR framework
Webs developed with React are called SPAs (single-page applications)
How can a CSR web be served?
In the developer stage (laptop/pc) you just need to use some kind of hot reload server (usually Node.js) which translates React into pure JavaScript code and link it to your browser.
These kind of servers are provided or developed by framework creators (Angular, Vue.js, React, etc.). Usually, they are pre-configured in your package.json as: npm run dev or npm run start
In testing/production stage, you should not use the hot reload server. You should perform a build which translates react into a pure JavaScript code. Usually is the command npm run build and the result are new files on some folder in your workspace: index.html, bundle.js, main.css, etc.
These files are ready to published on any HTTP server from minimal to a complex servers:
Apache
nginx
haproxy
Tomcat
WildFly
IIS
free/paid web FTP services
any decent server on any technology capable to serve HTML content.
React in the developer stage
If you are using create-react-app in a correct and standard way, there is a start script in your package.json file ready to use:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
I advice you to change it from start to dev to make it more intuitive. Let’s empty the start script to be correctly configured for the next stage.
React in the testing/production stage: Basic
If your React code is ready to be tested or used by real users in the real world, and your create-react-app workspace is correct and standard, these are the required and minimal steps:
install a minimal Node.js HTTP server
npm install http-server --save
add this in your script main:
"start": "http-server ./build"
execute npm run build
if there is no errors and your static files are created (index.html, CSS, JavaScript, etc.), perform:
npm run start
For more information (custom port, etc.) check this minimal Node.js HTTP server implementation:
http-server: a simple static HTTP server
React in Testing/Production stage: Docker
If your package.json has correctly configured the standard scripts:
npm run build
npm run start (with http-server or another)
You could use Docker to deploy it on any Linux server in this universe:
FROM node:10
COPY . /opt/
WORKDIR /opt/
RUN npm install
RUN npm run build
ENV PORT 8080
EXPOSE 8080
ENTRYPOINT ["npm","run","start"]
Linux is the only option for real environments. Windows and Mac are just for the developer stage
React in the testing/production stage: Advanced server
What if your requirement needs:
user sessions
login/logout feature
user inactivity expiration
JWT OAuth 2 token refresh
any other feature that React or any CSR/SPA was not designed for
In this case you need an advanced server implemented in some technology like: Node.js, Java, Python, PHP, etc.
These implementations:
should expose your endpoints like: /login, /logout ready to be called from your React, Angular, or Vue.js
should handle the user session with any common way: memory, Redis, MongoDB, etc.
offer a login: basic authentication, Google, Microsoft, etc.
My first attempt was:
https://github.com/jrichardsz-software-architect-tools/geofrontend-server
I am planning a revamp with more features and unit tests.
React in the testing/production stage: Advanced API/microservices
All of the features explained in the previous paragraph could be implemented on any back end REST API or microservice.
With that, your CSR/SPA builds will still be static and won’t need any crazy HTTP server. Just the basics as explained at the start of this answer.

Answer 2

Express / Node.js is case-sensitive. You need to provide an absolute path to the file:
const app = require('express')();
app.get("/", function(req,res) {
// Absolute path
res.sendFile("C:/Users/%username%/fullpath/index.js")
});
app.listen(3000, function() {
console.log("App listerning on port 3000");
});
A relative path is when you are in a directory, and specify a file without specific location:
# Absolute path
C:/Users/John/path/to/file.txt
# Relative path
path/to/file.txt