Recently I solved an issue in the webapp I am writing for the Zukunftschreiben↗ team. Since it was a fairly easy fix and I didn’t immediately find a solution on google, I wanted to write down what I came up with. The problem was that the webapp needed a page that explained its privacy policy. This policy was a huge html file and I did not want hard code its content as a react component.

The Solution

The solution was quite simple, as it turns out there is a package named html-react-parser↗ that can parse html as a string.
But first I needed to get the html file as a string from my component. The backend of the webapp was written in nodejs with express, so I decided to provide an API that returns the string as a file.

Here we load our file and create the function that returns the html file as a string

privacyPolicy.controller.js

1
const fs = require('fs');
2
var text = fs.readFileSync("./resources/privacy-policy.html",'utf8');
3

4
exports.getPrivacyPolicy = function (req,res) {
5
    res.json(text)
6
}

Here we provide the API that returns the file as a string

privacyPolicy.route.js

1
module.exports = privacyPolicyRoute;
2

3
function privacyPolicyRoute(){
4
    var privacyPolicyController = require('../controllers/privacyPolicy.controller');
5

6
    var router = require('express').Router();
7
    router.get("/privacy-policy", privacyPolicyController.getPrivacyPolicy)
8
    return router
9
}

Now its time to consume this API and display our privacy policy in our frontend.

PrivacyPolicy.js

1
class PrivacyPolicy extends Component {
2
    constructor(props){
3
        super(props)
4
        this.state = {data: '' }
5
    }
6

7
    componentDidMount() {
8
        fetch('${BACKEND_IP}:${BACKEND_PORT}/api/privacy-policy')
9
            .then((response) => response.json())
10
            .then((data) => {
11
                        this.setState({
12
                            data: data
13
                        })
14
            })
15
    }
16
    render() {
17
        return  parse(this.state.data);
18
    }
19
}

And thats it! We were able to display a really long static html without having to hardcode it as a component! :) I will provide a github repo soon where u can try it out yourself!

Thanks for reading!

Loading html files in React

Apr 09 2020

276 words · 3 minutes

react nodejs No categories assigned