How to load images in express js hosted on vercel - node.js

I am trying to make a GitHub banner generator using express js, my code works fine locally but when I try to host it on vercel all the image files go missing and I get no such file or directory found error.
app.get('/api',async(req,res)=>{
const title = req.query.title || "Github Banner Generator"
const subTitle = req.query.subtitle || ""
const theme = req.query.theme || "default"
const _theme = require(`./themes/${theme}/${theme}.json`)
const image = await loadImage(fs.readFileSync('themes/default/image1.png'))
const img = await new Canvas(1280, 520)
.printImage(image,0,0)
.setColor(_theme.primaryColor)
.setTextFont('bold 60px Serif')
.setTextAlign('center')
.printText(title,1280/2,520/2)
.setTextFont('20px Serif')
.setTextAlign('center')
.printText(subTitle,1280/2,(520/2)+60)
.toBuffer();
res.set({'Content-Type':'image/png'})
res.send(img)
})

I think the image path isn't right because of you didn't used an absolute path. You should read more about the difference between ./ and __dirname in NodeJS.
My solution would be to use __dirname + (the file location depending on the current file folder)
const image = await loadImage(fs.readFileSync(__dirname
+ '/themes/default/image1.png'));
Here, I assume that your project structure looks something like this...
/package.json
/index.js (contains the code)
/themes/default/image1.png

Related

not getting data from .env file in node.js

js and i'm getting error with accessing data from .env file.
my file structure looks like this:
enter image description here
in .utils folder i have file mail.js where i need to access port and other data from .env
mail.js
require("dotenv").config({ path: "../.env" });
const port = process.env.email_port;
const host = process.env.email_host;
const user = process.env.email_user;
const pass = process.env.email_pass;
console.log("port", port); //undefined
getting undefined here.
Note: path is correct to .env and variable names are also correct.
Try to add require("dotenv").config() to the server app or to remove the { path: "../.env" } from the require-statement.

In nodejs, how can I use '_dirname' in ejs file type?

I am trying to display an image in an EJS file and managed to get the file name, however, I would need the relative path, i.e. __dirname + filename to display that image.
Use path.join() for better accessibility:
const path = require("path");
// rest of code
const imagePath = path.join(__dirname, "uploadImages/" + product[i].productImage);
Manage to access the folder using the absolute path, i.e. from the root directory:
("../uploadImages/" + product[i].productImage);

Encoding issue with reading markdown files on Github

When I load a markdown file from GitHub I am running into a lot of errors. I think I am not using the right encoding for GitHub files through Octokit. Any suggestions on how to fix my Buffer code in Node.js?
Is base64 and then to ascii correct for Github content? It works fine when loading it directly in my project without GitHub. I have a feeling GitHub stores their files in a different format but can't find docs on it.
const repos = await octokit.repos.getContents({
owner: 'owner-hidden',
repo: 'repo-hidden'
path: '/dinner.md
});
// repo loads with data.content just fine
const bufferedData = Buffer.from(repos.data.content, 'base64').toString('ascii');
const ymlData = YAML.parse(bufferedData); ## issue with reading this
The error is below, but the error doesn't necessarily matter because it works when I load it directly in my project there are no errors.
YAMLException: the stream contains non-printable characters at line 36, column 126:
... auteLed spinach and ratatouille
^
Loading the markdown file directly in my project there was no errors:
const fs = require('fs');
const path2 = require('path');
const file = path2.resolve(__dirname, '/dinner.md');
const content = fs.readFileSync(file);
const bufferedData = Buffer.from(content).toString('ascii');
console.log({bufferedData});
As one of the members of Octokit replied to me on my Github issue, I don't need to encode with ascii, I should be using uft8 as shown here:
- const bufferedData = Buffer.from(repos.data.content, 'base64').toString('ascii')
- const bufferedData = Buffer.from(repos.data.content, 'base64').toString()
buffer.toString() defaults to utf8 which is what I want.

Can't use fs in heroku

I was codding a simple bot for discord, and I noticed that when i use fs, the app doesn't deploy. I need to access a file that is inside a folder. But when I use:
const commandFiles = fs.readdirSync('./commands').filter(file => file.endsWith('.js'));
for (const file of commandFiles) {
const command = require(`./commands/${file}`);
client.commands.set(command.name, command);
}
The app doesn't deploy, I tried to do everything in one .js file, but i really need to use modules.export
I cant even use:
const configFile = require('./config')
If whatever look here with same case as me:
console error looking as bad directory on heroku, my manually app working.
Local node.js need using / or
On Heroku you must use /
So I change this line:
const folderPath = __dirname + "\\my_modules";
to this:
const folderPath = __dirname + "\\my_modules";
I used type module so __dirname is my variable setup by package URL and path.

How to render a Log / text file in node js through url?

I am trying to view the log File in the browser on hitting a particular url. I have the log file in my local (/logsFolder/app.log)
I tried the following codes:
Code: 1
var app = express();
var path = require('path');
var logFile = require('/logs/app');
app.use('/logs',logFile);
It threw error like
Error: Cannot find module '/logs/app'
Code :2
const app = express();
const path = require('path');
const router = express.Router();
router.get('/logFile', function(req, res){
console.log("inside logt :");
res.render('./logs/app.log');
});
can anyone Please help me to resolve.
Your log is static text file, not a javascript, nor json file, that why you can't require it. (code 1)
You are not using template engine either, that's why your code 2 didn't work, It cannot be render by itself.
You can use the built in express middleware for static files.
Try this:
app.use(express.static('logsFolder'))
Now you can access all the content of logsFolder by requesting the file name. For example: http://your-url/app.log
Or try your code 2 with res.sendFile instead of res.render

Resources