3
13 Comments

How to manipulate code in an HTML file stored at the server-side using Node.js?

I am working on a project in which I have a folder on the server-side. The folder contains HTML, CSS and JS files that can be used to deploy a static site. I need to manipulate the code in the HTML file based on the data entered by the user on client-side and after the HTML, CSS, js files have been modified the user can download it in .zip format.

The problems I am facing are:

  1. How to edit code wherever I want in the files from the copy of the folder I created. To be precise If I want a <P> section </P> at a specific place in the HTML code, how do I do it? Can node.js be used for this? Would I need the code line number where I want to insert a new snippet?

  2. How to send user data like images to the server-side? For the data in the text format, would the JSON format work? Is node.js the right choice for this project?

  1. 3

    There are many ways to do this. You can use a templating engine for some things like https://www.npmjs.com/package/mustache , https://www.npmjs.com/package/thymeleaf ,

    you could even use something like https://www.npmjs.com/package/puppeteer to render the html server side and insert new DOM nodes , you can do a lot of things with puppeteer

    To send user data to server side, it's usually a multipart/formdata . You use an html form on client side with enctype='multipart/form-data' and on server side you have a controller that can handle multipart/formdata .
    I'm not a master of nodeJs , I only dabble from time to time but Nodejs is the right tool for this , yeah, you can do it with it.

  2. 2
    1. How about loading the HTML file in cheerio and then use jQuery-like functions to do all the modifications? It worked for me. I use it on my blog to add anchor links, highlight coding blocks, and more.

    Here is an example snippet:

    const cheerio = require('cheerio');
    const fs = require('fs'); 
    
    fs.readFile('path/to/file.html', 'utf8', function(err, data) {
    
        if (err) throw err;
    
        var $ = cheerio.load(data);
    
        // TODO: make modifications here
    
        console.log($.html());
    });
    
    1. Node.js provides excellent supports for uploading files. Just send a multipart request from the browser to upload the files. Here are some tutorials I wrote on this topic:

    https://attacomsian.com/blog/uploading-files-nodejs-express
    https://attacomsian.com/blog/express-file-upload-multer

    P.S. A better approach would be to store the site data in DB and regenerate the static files each time when the data is modified. This way you don't need to worry about loading pre-compiled HTML files.

    Good luck ✌️

  3. 2

    See you don't need JSON here, just send a post request to the endpoint with all the data.
    Just add the attribute enctype, see here - https://www.w3schools.com/tags/att_form_enctype.asp

    On the server side you can store your HTML Pages into the same JS file in form of a template literal -

    var other_variable = "dynamic data from form";
    var  some_unique_variable_name_here = "dynamic data from form";
    var htmlData = `
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> ${other_variable } </title>
    </head>
    <body>
        <p> ${ some_unique_variable_name_here } </p>
    </body>
    </html>
    `;
    

    Output of htmlData will be the thing you origially desired, now create a file using node and append htmlData to it.

  4. 1

    off topic, but curious to know what software did you use to create the diagram in the topic picture?

    1. 1

      https://awwapp.com/ simple and easy to use. However to have more control you can use something like figma.com

  5. 1
    1. do you mean you have raw html template on your DB like :
    <html>
     <h1>{{siteTitle}}</h>
    <html>
    

    then your user, through your dashboard change the siteTittle value to "Welcome to wonderful site"

    Then your server process and give an output :

    <html>
    <h1>Welcome to wonderful site</h1>
    <html>
    

    Is this what you mean? If this is what you mean it is very possible to be done in node JS. As @lukvo says, you can do this with Handlebars js. I do this stuff on https://formcubes.com for templating, and i use node js :)

    1. As the image is a tricky question, there are a lot of ways to do this. For example you can upload the image to Amazon S3 and save the link to your DB. It depends on your use case and situations.

    anyway if you have technical question, StackOverflow is your best friend.

    1. 1

      @mig13 I originally posted this there only but got no reply even after 2 day whereas I got answers here within 8-10 hours. So that's why.

  6. 1

    Your problem is a bit related to what the JAMstack solves - definitely check it out. Netlify is market leader at it, http://netlify.com/

    However, if I understand well, your wanted outcome is not a single statically hosted website, but many dynamically generated ZIP files, different ones for each user. You'll have to implement an API endpoint for this that generates the ZIP file, stores it somewhere (e.g. Amazon S3) and then returns the URL where the user can download the file. If the creation of the ZIP file takes some time, you could do it asynchronously (e.g. return the URL of an endpoint the frontend can query to download the ZIP file, or send the file to the user via mail).

    1. You do not need the line number where you want to insert something. Instead, use a template language like https://handlebarsjs.com/. It replaces stuff like {{name}} with your user's name and can even handle conditionals etc.

    2. How to send image data depends on the sort of API you're working with. A common approach is a multipart form. It's fairly easy to implement with GraphQL for example. Although it's probably easier to use a third party service for this, like Amazon's SDK https://docs.aws.amazon.com/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html

    NodeJS is a good choice for this kind of thing - a serverless setup would be ideal.

    1. 1

      Thanks a lot !! Awesome and detailed answer. Just what I was looking for.

  7. 1

    At https://versoly.com/ we store the HTML on a DB and then use S3 as well to store the file. To change the s3 we just replace the file.

    1. 1

      Thanks for replying. The problem is I want to automate the process. As you can see, the server receives data from the client and updates the HTML file according to the input. Say the user inputs his/her name in a form. This data is sent as JSON object to the server. The server now needs to update a certain html file with an H1 tag that has the name sent by the user from client-side. How to achieve this via a script. Node.js is the most probable answer I could find.

      1. 2

        Any backend language can do that.

        Is the JS and CSS different for each folder?

        1. 1

          yes it is different.

Trending on Indie Hackers
Finally, I think I've got a good idea 33 comments Keyword research mistakes to avoid - From a Head of SEO 9 comments Find SaaS Ideas #0015 9 comments How many new visitors did you get on your landing page last week? 9 comments Feedback trade! Help me with my WIP landing page, then link yours 😊 8 comments I recently added options to monetize and run video ads on the video hosting project Vadootv. Demo link here 6 comments