(react express) DOM on server - Return web pages (SSR)-CodePudding

I have a problem related to rendering HTML from node js.

I am creating dynamic HTML (Reactj concept they are currently using), but I don't know how to do it the same way Reactjs does on my node js server. https://es.reactjs.org/docs/rendering-elements.html

I used:

const express = require ('express')
const app = express ()
const port = 3000
// app.use (express.static ("public"))
app.listen (port, () => {
  console.log (`Example app listening at http: // localhost: $ {port}`)
})

I have read that if you use app.use (express.static .., it just loads static files.

So I decided to add an endpoint, to convert the site to dynamic:

app.get ("/", (req, res) => {
  res.send ("<html> <head> </head> <body> <h1> .... </h1> </body> </html>");
});

The problem is that I need to take an "index.html" pass it to plain text, read it with DOM and through the DOM add or remove elements (text) Finally return the entire html page.

1 - Pass the html to text.
2 - Cycle that text by dom
3 - Add or remove items
3.1 - Add divs inside other containers "through an id" by DOM

app.get ("/", (req, res) => {
  res.send (stringTextHtmlWebPage); 
// The problem is that I have to return the entire directory like 
// app.use(express.static ("public")) does; but with the modified file.
});

In Reactj they do something similar. They inject with the ReactDOM.render. They have a:

index.js
function App () {
  return (<div className = "container mt-5"> ... </div>);
  // I was surprised by this line, it goes without any quotes ... and it works ...
}

ReactDOM.render (
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById ('root') // element from public / index.html
);

Index.html
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id = "root"> </div>

In my case, how would it be to return an entire HTML page. With the steps that I indicated?

Edit:

I have to return a whole directory of files. (But some modified and some not) For instance: I modify the index.html but it has associated a css, js, bootstrap ... It has to work like an "app.use (express.static (" public "));" but with some modified files. In short, modify a file using node js and then call app.use (express.static ("public")); and that this file is modified. (Similar to what React does)

// Modify file
// calls app.use (express.static ("public")); (with the modification)

or would there be some way to inject the code into my "app" variable? Some of the style

app.injectPath ("public / index.html"). Tour_the_DOM (tag ["tag1"]) = "<div> add this div </div>";

Just like React does?

I can't use templates (pug, manillar...), because the source code of the pages is written elsewhere.

I have also read: https://es.reactjs.org/docs/add-react-to-a-website.html But I don't know how to integrate it with app.use (express.static ("public"))

This is what I am looking for. https://tech-wiki.online/es/react-server-side-rendering.html But it's not working. Any solution to do the same?

Thanks in advance.

CodePudding user response：

I'm not sure I completely understand what you're trying to do here but DOM Manipulation is handled by the browser, so it happens on the client-side, not the server-side.

As you're using express, you could use sendFile() to send your file to the browser and perform DOM manipulations.

For example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Document</title>
</head>
<body>
    <div id="results"></div>   
  <script>
    const div = document.getElementById('results');
      div.innerHTML = 'Adding Text Here';
  </script>
</body>
</html>

app.js

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.sendFile('index.html', { root: __dirname })
})

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

CodePudding user response：

Sorry I'm leaving Node js. Too many "simple errors" using node js. I tried for two months to pay "a lot of attention" to node js.

I have to call many libraries to link to each other and the rendering is by hand and a myriad of simple errors.

I'm going to do it with PHP.

PHP saves you from headaches and solves my problem. If it is old. But it has too much force.

PHP is by far the best backend language. Sorry for the node js ones on this forum. But the truths hurt