Before I call expressApp.use(express.static(path.join(__dirname, '/../frontend/dist'))); I need to modify the html-code. What I basically need to do is inserting meta tags in two middleware functions. I figured out how to do this. But with my solution I call a middleware-functions inside another one.
app.js
let frontend = await fs
.readFileSync(path.join(__dirname, '/../frontend/dist/index.html'))
.toString('utf8');
expressApp.use((req, res, next) => {
//...
frontend = frontend.replace(
'<meta device="ABC" />',
'<head><meta device="' + deviceId + '"/>'
);
next();
});
expressApp.use((req, res, next) => {
const language = req.get('language') || 'en_GB';
logger.info('language:' + language);
this._languageModule.setLanguage(language);
frontend = this._languageModule.insertSIDs(frontend);
logger.info(frontend);
expressApp.use(express.static(path.join(__dirname, '/../frontend/dist'))); // nested middleware function
next();
});
/** set up all the express routes **/
expressApp.get('/', (req, res) => {
res.send(frontend);
});
Edit
If I don't call expressApp.use(express.static(path.join(__dirname, '/../frontend/dist'))); nested - like this:
expressApp.use((req, res, next) => {
const language = req.get('language') || 'en_GB';
logger.info('language:' + language);
this._languageModule.setLanguage(language);
frontend = this._languageModule.insertSIDs(frontend);
logger.info(frontend);
next();
});
expressApp.use(express.static(path.join(__dirname, '/../frontend/dist')));
the HTML will not be served modified.
You probably should write your own middleware that handles the modification of the files. Here's an example not tested. But it's rough. It's based on the express.static function
const fs = require("fs");
var parseUrl = require('parseurl')
app.use((req, res, next) => {
var originalUrl = parseUrl.original(req)
var path = parseUrl(req).pathname
// make sure redirect occurs at mount
if (path === '/' && originalUrl.pathname.substr(-1) !== '/') {
path = ''
}
// We only answer to GET
if (req.method !== 'GET' && req.method !== 'HEAD') {
return next()
}
let path = path;
fs.exists(path, (exists) => {
if(!exists)
{
// file don't exists skip this middleware
return next();
}
fs.readFile(path, (err, data) => {
if (err)
{
// Can't send the file skip this middle ware
return next();
}
// Do whatever you need with the file here?
// ...
// Setup mime type of the file
res.setHeader("content-type", "text/html");
// send the client the modified html
res.send(data);
});
console.log(exists ? 'it\'s there' : 'no passwd!');
});
});
For the original source please take a look at this github page:
https://github.com/expressjs/serve-static/blob/master/index.js
Related
The method for creating a custom server for Next.js is provided in the official docs:
// server.js
const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()
app.prepare().then(() => {
createServer((req, res) => {
// Be sure to pass `true` as the second argument to `url.parse`.
// This tells it to parse the query portion of the URL.
const parsedUrl = parse(req.url, true)
const { pathname, query } = parsedUrl
if (pathname === '/a') {
app.render(req, res, '/a', query)
} else if (pathname === '/b') {
app.render(req, res, '/b', query)
} else {
handle(req, res, parsedUrl)
}
}).listen(3000, (err) => {
if (err) throw err
console.log('> Ready on http://localhost:3000')
})
})
However, parse() is now flagged as deprecated. The official replacement for parse is the WHATWG URL api.
But the URL class object is not usable by handle() function within the createServer() function (i.e., the parsedUrl object created using parse(req.url, true) cannot be used by handle(req, res, parsedUrl)).
How can the code above be rewritten to use the URL api instead of parse? (Or is there a different solution without either URL or parse?)
I'm using NodeJS w/ Express to create a web app that records your audio using the VMSG library and posts the BLOB audio to my file system using HTTP Requests and multer. It also adds that instance of a recording into a MongoDB database.
I'm having an issue with the fetch command. It's not working unless I put an alert right after the fetch. The way I have it set up is that I have my main express app (index.js), and a router to the /recordingsDirectory (recordings.js) which is the endpoint for processing the posts. My main index HTML page uses Handlebars and uses a separate JS script (recorder.js) to 1) use the VMSG library and 2) fetch a POST to the /recordingsDirectory once someone submits the audio file w/ the name and the AudioBlob present. This is where I'm stuck. I can fetch in recorder.js with an alert line after the fetch, but I can't have the fetch on the end of the else if block by itself. I'd like to do it without this since the alert is ugly. A solution I've tried is that I tried to make the onsubmit function async and await fetch since I thought maybe it's waiting for a promise but that didn't work.
Here are the files. I commented CRITICAL and SUPER CRITICAL to the lines of code that you should check out and I think where the issues lie:
index.js
const express = require('express')
const handlebars = require('express-handlebars')
const path = require('path')
const XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest
const xhr = new XMLHttpRequest()
const db = require('./db')
const app = express()
const PORT = process.env.PORT || 8000
app.set('view engine', 'hbs')
app.engine('hbs', handlebars({
layoutsDir: path.join(__dirname, 'views', 'layouts'),
extname: 'hbs',
defaultLayout: 'index',
partialsDir: path.join(__dirname, 'views', 'partials'),
}))
app.use(express.json())
app.use(express.urlencoded({extended: false}))
app.use((err, req, res, next) => {
if (err instanceof SyntaxError && err.status === 400 && 'body' in err) {
return res.status(400).send({ status: 404, message: err.message })
}
next()
})
app.get('/', (req, res) => {
res.render('main', {
title: 'Main Page'
})
})
app.get('/recordings', (req, res) => {
var database = db.get().db('AudioJungle')
database.collection('recordings').find().sort({ "date": -1 }).toArray(function(err, docs) {
res.render('recordings', {
title: 'Recordings',
recordings: docs
})
})
})
// CRITICAL
app.use('/recordingsDirectory', require('./recordings/recordings'))
app.use(express.static('public'))
app.use('/scripts', express.static(path.join(__dirname, 'node_modules', 'vmsg')))
db.connect(function(err) {
if (err) {
console.log('Unable to connect to Mongo.')
process.exit(1)
} else {
app.listen(PORT, () => console.log(`Listening on Port: ${PORT}`))
}
})
process.on('SIGINT', function() {
db.close(function () {
console.log('Disconnected on app termination');
process.exit(0);
});
});
app.use((req, res, next) => {
res.status(404).send({
status: 404,
error: 'Not found'
})
})
recordings.js (Aka the /recordingsDirectory endpoint for a fetch POST)
const express = require('express')
const router = express.Router()
const multer = require('multer')
const fs = require('fs-extra')
const db = require('../db')
const { ObjectId } = require('bson')
const moment = require('moment')
const upload = multer({
storage: multer.diskStorage({
destination: (req, file, callback) => {
let path = './public/uploads'
fs.mkdirsSync(path)
callback(null, path)
},
filename: (req, file, callback) => {
createRecording(req).then((id) => {
var file_name = id + '.mp3'
callback(null, file_name)
})
}
})
})
var type = upload.single('audio-file')
// CRITICAL
router.post('/', type, (req, res) => {
console.log('made it')
res.status(200)
res.send('OK')
})
router.delete('/delete', (req, res) => {
deleteRecording(req.body._id).then((dbResponse) => {
if (dbResponse == null || dbResponse == undefined) {
res.status(400).json({ msg: 'ID already deleted' })
} else {
res.status(200)
}
})
})
router.get('/', (req, res) => {
var database = db.get().db('AudioJungle')
var recordings = database.collection('recordings')
recordings.findOne({"_id": ObjectId(req.query.id)}, function(err, result) {
if (err) throw err
if (result == null || result == undefined) {
return res.status(400).json({
status: 404,
error: 'Recording no longer in the database'
})
}
res.status(200)
res.json({
name: result.name,
date: result.date
})
})
})
async function createRecording(req) {
var database = db.get().db('AudioJungle')
var recordings = database.collection('recordings')
var audioObject = {
name: req.body.name,
date: moment().format('MMMM Do YYYY, h:mm:ss a')
}
var dbResponse = await recordings.insertOne(audioObject)
return dbResponse.insertedId
}
async function deleteRecording(id) {
var database = db.get().db('AudioJungle')
var recordings = database.collection('recordings')
var audioToDelete = {
_id: ObjectId(id)
}
var deleteResult = await recordings.deleteOne(audioToDelete)
return deleteResult
}
module.exports = router
And below is the Script the audio and name and tries to Fetch (where I need the alert for it to actually process into the /recordingsdirectory)
recorder.js
import { record } from "/scripts/vmsg.js";
let recordButton = document.getElementById("record");
var blobObj = null
recordButton.onclick = function() {
record({wasmURL: "/scripts/vmsg.wasm"}).then(blob => {
blobObj = blob
var tag = document.createElement("p")
tag.id="finishedRecording"
var text = document.createTextNode("Audio File Recorded")
tag.appendChild(text)
var element = document.getElementById("box")
element.appendChild(tag)
document.getElementById('box').appendChild(a)
})
}
let form = document.getElementById('mp3Form');
form.addEventListener("submit", submitAudio)
function submitAudio() {
var fileName = form.elements[0].value
if (fileName == "") {
alert('Please enter a name for your file')
} else if (blobObj != null) {
// CRITICAL
// SUPER CRITICAL WHERE FETCH DOESN'T WORK UNLESS I PUT AN ALERT AT THE END
const formData = new FormData()
formData.append('name', fileName)
formData.append('audio-file', blobObj)
const options = {
method: 'POST',
body: formData
}
fetch('/recordingsDirectory', options);
// If I comment an alert here, /recordingsDirectory will process the post since it console.logs 'made it'
} else {
alert('Record some Audio to upload')
}
}
Here's my file system.
Also, I'd like to mention that the fetch works properly on my Windows PC without having to add the alert, but it doesn't work without the alert on my macbook. If any one figures out a fix or an error in how I'm doing things to allow this please let me know. I've been stuck on this problem for a day now. Thanks a bunch!
I am trying to serve a static directory dynamically by adding a pathname parameter to the URL.
I am able to serve the directory just fine with the following line, which renders the html and subdirectories in the browser without having to readFile etc:
app.use('/', express.static('/Users/virtuload-beta/backend/uploads/folder/subfolder/'))
This helped for testing but I need it to be dynamic as I am getting the directory name depending on a path variable from MongoDB, and then serving the directory based on the URL.
I've tried multiple solutions, this is my current one:
app.js:
app.use('/static', express.static(path.join(__dirname, '../uploads', )), serveRouter)
routes.js:
router.get('/:id', FileCtrl.servepath);
-FileCtrl.js:
const servepath = async (req, res) => {
try {
let id = req.params.id
Upload.findById(id)
.populate('Upload')
.select('relPath') //relPath = /folder/subfolder
.exec(function(err, upload) {
if (err) {
res.send(err)
} else {
const filepath = `${upload.relPath}`
console.log(filepath) //logs folder/subfolder
//parse http object coming from client
const urlObject = url.parse(req.url, true)
console.log(urlObject)
var myUrl = new URL(`http://localhost:8000/static/${filepath}`)
return myUrl;
}
})
} catch (e) {
console.error(e)
}
}
I'm not getting any error but it's not working.
Manipulate the req.url and return next()
First your route
router.get('/:id', FileCtrl.servepath);
Controller(addednext):
const servepath = async (req, res, next) => {
try {
let id = req.params.id
Upload.findById(id)
.populate('Upload')
.select('relPath') //relPath = /folder/subfolder
.exec(function (err, upload) {
if (err) {
res.send(err)
} else {
const filepath = `${upload.relPath}`
req.url = `/static/${pathfile}/index.html`
return next();
}
})
} catch (e) {
console.error(e)
}
}
Last your static route (note: define it after all other routes)
app.use('/static', express.static(path.join(__dirname, '../uploads')), serveRouter)
I am working on a personal project and I do not have much experience with nodeJS, the idea is to bring a JSON that has remotely taken some data and generate some statistics, I am doing some tests before starting fully in the project and I am having problems with the callback.
the server.js works correctly,
my module is the following:
const extjson = require('remote-json');
//---------------------API CONFIG--------------------------
//apikey
const apikey ="xxxxxxxxxxxxxxxxxxxxx";
function get_sum_id(sumname){
const urlsumbySumName = "https://la2.api.riotgames.com/lol/summoner/v3/summoners/by-name/" + sumname + "?api_key=" + apikey;
var id;
extjson(urlsumbySumName).get((err, res, body)=> {
id = body.id;
});
return id;
}
module.exports = {get_sum_id
};
and the routes.js is the following:
const riot = require('./rapi.js');
const express = require('express');
//---------------------------------------------------------
const router = express.Router();
//Jtask -- task remote json
//const Task = require('../models/Task'); // taskdb
router.get('/',async (req, res) => {
res.render('index');
});
router.post('/profile', (req,res)=>{
const sum = req.body.summoners;
console.log(riot.get_sum_id(sum));
res.render('profile',{sum});
});
module.exports = router;
I want to show that id by console and it returns undefined, the idea is to pass that value to the render below to have it available in an EJS document.
Your module make an asynchronous call to another server with remote-json. It means that the callback will be called only after the request to this other server. So, this line return id; is read before this line id = body.id;.
One way to fix that is to provide the callback from the place where you call your module function.
Based on your code you could do something like that :
// module.js
const extjson = require('remote-json');
const apikey ="xxxxxxxxxxxxxxxxxxxxx";
function get_sum_id (sumname, callback) {
const urlsumbySumName = "https://la2.api.riotgames.com/lol/summoner/v3/summoners/by-name/" + sumname + "?api_key=" + apikey;
extjson(urlsumbySumName).get(callback);
}
module.exports = { get_sum_id };
// app.js
const riot = require('./rapi.js');
const router = express.Router();
router.post('/profile', function(req, res, next) {
riot.get_sum_id(req.body.summoners, function (err, resp, body) {
console.log(body);
res.json(body); // Response here
});
});
module.exports = router;
Now, requests to your server will be in pending until your callback close it with res.json(body);.
Thank you very much I am working, now I understand much better how the asynchronous functions work. I leave here the complete solution to my problem in case someone needs it in the future:
//rapi.js
const extjson = require ('remote-json');
//---------------------API CONFIG--------------------------
//apikey
const apikey ="RGAPI-77f658f1-ff2b-40e7-a74c-47f7510c8dac";
//trayendo los datos desde riot
function get_sum_id(sumname, callback){
const urlsumbySumName = "https://la2.api.riotgames.com/lol/summoner/v3/summoners/by-name/" + sumname + "?api_key=" + apikey;
extjson(urlsumbySumName).get(callback)
}
module.exports = { get_sum_id };
//routesapp.js
const riot = require('./rapi.js');
const express = require('express');
//---------------------------------------------------------
const router = express.Router();
router.get('/',async (req, res) => {
res.render('index');
});
router.post('/profile', (req, res, next)=>{
const sum = req.body.summoners;
riot.get_sum_id(sum,function (err, resp, body){
console.log(body.id);
//responces....
res.render('profile',{sum, id: body.id})
});
});
module.exports = router;
TNX very much!
Trying to write the following code:
index.js
const http = require('http');
const port = 9090;
const url = require('url');
const handlers = require('./handlers.js');
http.createServer((req, res) => {
req.path = url.parse(req.url).pathname;
let handler = handlers(req.path);
handler(req, res);
}).listen(port);
handlers.js:
const fs = require('fs');
const homeHandler = require('./handlers/home-handler');
const contentHandler = require('./handlers/content-handler');
module.exports = (path) => {
switch (path) {
case '/':
return homeHandler;
case '/content':
return contentHandler;
}
}
home-handler.js
const fs = require('fs')
module.exports = (req, res) => {
fs.readFile('./index.html', (err, data) => {
if (err) {
console.log(err.message);
return;
}
res.writeHead(200, {
'content-type': 'text/html'
});
res.write(data);
res.end();
return;
});
};
When I "Launch program" and run in browser localhost:9090, the function handler is executed in browser, but in the debug console it throws:
TypeError: handler is not a function
Using console.log(handler) it shows that handler is function, also instanceof shows that handler is instance of Function. What's wrong with this?
Your handlers function only handle two specific inputs, / and /content. Any other request will produce an error, since handlers will not return a function.
You might say, "That's fine! I'm not requesting a path outside of that set of two paths," but I think you might be wrong.
Most browsers will make a request for a favicon by requesting /favicon.ico in addition to making a request for the actual URL you typed in. If the browser does this additional favicon request, you will see successful results for you intended request (as you do), but then also see a failure message for the additional favicon request, which you haven't set up your code to handle.
I suggest adding a default debug handler:
module.exports = (path) => {
switch (path) {
case '/':
return homeHandler;
case '/content':
return contentHandler;
default:
(req, res) => {
res.end("Path not handled");
console.warn("No handler for", req.url);
}
}
}
const fs = require('fs')
const faviconIco = '/favicon.ico'
module.exports = (req, res) => {
fs.readFile('.' + faviconIco, (err, data) => {
if (err) {
console.log(err.message)
return
}
res.writeHead(200, {
'content-type': 'image/x-icon'
})
res.write(data)
res.end()
})
}