SHARE
TWEET

server side rendering

a guest Dec 3rd, 2019 77 in 1 day
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.  
  2. var express = require('express');
  3. const app = express();
  4. const port = 3000;
  5. const path = require('path');
  6. const fs = require('fs');
  7. const os = require('os');
  8. const https = require('https');
  9.  
  10.  
  11. /*
  12.     dovresti avere una struttura del genere:
  13.     - src/* => codice reactjs
  14.     - assets e altro ...
  15.     - public/
  16.         - index.html
  17.         - altro ...
  18.     - server.js
  19.     - package-server.json
  20.     - package.json
  21.     - Dockerfile
  22.  
  23.     dopo aver fatto:
  24.          npm run build
  25.          
  26.     dovresti avere anche
  27.     - build/ => generata da react build
  28.         - index.html
  29.         - *.js
  30.         - *.css
  31.     (per semplificare io ho usato Docker puoi saltare questo passo e usare direttamente nodejs)
  32.     docker build -t webapp . => builda l'immagine docker
  33.     docker run webapp
  34.    
  35. */
  36.  
  37.  
  38.  
  39.  
  40. //questo dovrebbe essere ridondante, controlla se serve veramente
  41. app.get('/',function(req,res){
  42.     const filePath = path.resolve(__dirname, './build', 'index.html');
  43.         fs.readFile(filePath, 'utf8', function (err,data) {
  44.             if (err) {
  45.               return console.log(err);
  46.             }
  47.             data = data.replace(/\$OG_TITLE/g, "My title");
  48.             data = data.replace(/\$OG_DESCRIPTION/g, "Default description");
  49.             result = data.replace(/\$OG_IMAGE/g, "https://mysite.io/defaultImage.jpg");
  50.             res.send(result);
  51.           });
  52.  
  53. });
  54. // questo è il percorso di una pagina che vuoi che sia indicizzata dai crawler
  55. // se express risolve questo path, invece di renderizzare subito la pagina index.html come farebbe normalmente
  56. // fa una chiamata API per recuperare i dati dalla API.
  57. // legge la pagina html statica e sostituisce in corrispondenza di alcuni placeholder (ne puoi mettere quanti ne vuoi)
  58. // i contenuti ottenuti dalla API
  59. // risultato: il crawler che accede a un articolo /blog/post/1 si troverà già tutti gli header di cui ha bisogno popolati
  60. // il drawback di questa soluzione è che la chiamata API la fai due volte, sia qui, sia nel codice reactjs.
  61. // se dovesse cambiare la API devi cambiarla in due punti diversi
  62. app.get('/blog/post/:articleId',function(req,res){
  63.     var articleId = req.params.articleId;
  64.     console.log("Request for "+articleId);
  65.     https.get("https://mysite.io/api/blog/post/"+articleId, (resp) => {
  66.     let data = '';
  67.     // A chunk of data has been recieved.
  68.     resp.on('data', (chunk) => {
  69.         data += chunk;
  70.     });
  71.     // The whole response has been received. Print out the result.
  72.     resp.on('end', () => {
  73.        
  74.         let article = JSON.parse(data);
  75.         console.log(article);
  76.         const filePath = path.resolve(__dirname, './build', 'index.html')
  77.             fs.readFile(filePath, 'utf8', function (err,out) {
  78.               if(article){
  79.                 var title = article.title;
  80.                 var description = article.description;
  81.                 var image = article.images && article.images.length>0?article.images[0]:"https://mysite.io/defaultImage.jpg";
  82.                 if (err) {
  83.                 return console.log(err);
  84.                 }
  85.                 out = out.replace(/\$OG_TITLE/g, title);
  86.                 out = out.replace(/\$OG_DESCRIPTION/g, description);
  87.                 if(image){
  88.                   result = out.replace(/\$OG_IMAGE/g, image);
  89.                 }
  90.               }
  91.                 res.send(result);
  92.             });
  93.     });
  94.     })
  95.     .on("error", (err) => {
  96.         console.log("Error: " + err.message);
  97.         const filePath = path.resolve(__dirname, './build', 'index.html');
  98.         fs.readFile(filePath, 'utf8', function (err,data) {
  99.             if (err) {
  100.               return console.log(err);
  101.             }
  102.             data = data.replace(/\$OG_TITLE/g, "My title");
  103.             data = data.replace(/\$OG_DESCRIPTION/g, "Default description");
  104.             result = data.replace(/\$OG_IMAGE/g, "https://mysite.io/defaultImage.jpg");
  105.             res.send(result);
  106.           });
  107.       });
  108. })
  109.  
  110.  
  111. app.use(express.static(path.resolve(__dirname, './build')));
  112. // in caso non risolva nessun path, restituisce la index.html così com'è
  113. app.get('*', function(request, response) {
  114.     const filePath = path.resolve(__dirname, './build', 'index.html');
  115.     response.sendFile(filePath);
  116.   });
  117. app.listen(port, () => console.log(`Listening on port ${port}`));
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top