While working on a Web Viewer project with axios for web scraping practice, I encountered an issue where the CSS wasn't loading properly.
Here is the code snippet I used:
console.log("Tribble-Webviewer is starting!")
const express = require('express')
const app = express()
const port = 3000
const publicDir = app.use(express.static('public'))
var cheerio = require('cheerio'); // Essentially jQuery for node.js
const axios = require('axios').default;
const rp = require('request-promise');
const url = 'https://pointless.com/';
app.get('/', (req, res) => {
app.use('/static', express.static('public'))
})
app.get('/test', (req, res) => {
axios.get(url)
.then(({ data }) => res.send(data))
})
app.listen(port, () => {
console.log(`Tribble-Pro is listening on port ${port}`)
})
The problem arises when trying to load the /test page, where the CSS fails to display correctly.
See an example of the CSS not loading in the following image:
Image