nodejs - how to manage multiple files upload in express - javascript

I'm writing a simple nodejs app that I want to pack using pkg. The app will give to the user the ability to upload some files that after are processed from the embedded server script will be sended back to the vue client app.As I know, I need to add multipart/form-data to the vuejs form?Since I'm new to express, what's the best way to handle multiple files upload?Since pkg will pack the app to work with a virtual filesystem, how I can create a temp dir in the folder where the app is executed when the files are uploaded?I've seen the provided example on the express website but it uses some dependencies and I don't want to have too many libraries for my project.
This is the basic code I have at the moment
const http = require('http');
const express = require('express');
const path = require('path');
const app = express();
class eCrypt {
constructor(){
this.app = app;
this.assets = path.format({dir: __dirname, base: 'assets/'})
}
async init(){
this.app.use(express.static())
this.app.use(express.json());
this.app.use(express.urlencoded({
extended: true
}));
this.app.get('/', (req, res) => {
res.sendFile('index.html', {root: this.assets});
});
this.app.post('/compressEncrypt', (req, res) => {
//here I need to manage uploaded files
});
}
async encryptAndCompress(data){
//in this method I'm processing the files
}
}

Related

stuck at building process while hosting on Vercel

I'm using node.js as a server-side to store the API respond, the app is working without any issue but recently I have been trying to host it on Vercel so I ran into many issue, the project get stuck at the building process...
the building output :
Building output
My server.js code :
// Setup empty JS object to act as endpoint for all routes
projectData = {};
// Require Express to run server and routes
const express = require('express');
// Start up an instance of app
const app = express();
/* Middleware*/
//Here we are configuring express to use body-parser as middle-ware.
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// Cors for cross origin allowance
const Cors = require('cors');
app.use(Cors());
// Initialize the main project folder
app.use(express.static('website'));
// Setup Server
const port = 8000;
const Server = app.listen(port , run);
function run() {
console.log(`hello there :D`);
console.log(`here is ${port} ready to go`);
}
//GET method
app.get('/all', function(req,res){
res.send(projectData)
console.log(projectData);
})
//POST method
app.post("/addUserComment", function(req,res){
projectData = {
temp : req.body.temp,
date : req.body.date,
feeling : req.body.feeling,
}
console.log(projectData);
res.send(projectData);
})
My working directory and build settings :
Working directory
Build settings
note: server.js is my server-side file, and my website folder includes my app.js file and my HTML, CSS files, also i did try to add Vercel.json file but i couldn't understand how to use it, so if you gonna add this file in your answer please explain how and why
I think you need to remove the build command, because it's now trying to run the server.js file instead of making a build.

Running an Express application inside an Express application

I have two projects. First a single page app (without bundler) which is being started by the following server.js:
const express = require("express");
const morgan = require("morgan");
const path = require("path");
const DEFAULT_PORT = process.env.PORT || 8000;
// initialize express.
const app = express();
// Initialize variables.
let port = DEFAULT_PORT;
// Configure morgan module to log all requests.
app.use(morgan("dev"));
// Setup app folders.
app.use(express.static("app"));
// Set up a route for index.html
app.get("*", (req, res) => {
res.sendFile(path.join(__dirname + "/index.html"));
});
// Start the server.
app.listen(port);
console.log(`Listening on port ${port}...`);
Secondly, I also have a separate Express application which handles authentication and has multiple routes and templates/views. However, I want one of those routes to contain the single page app instead of a simple view. I copied the whole repository of my first project into the Express applications src-directory and would now like to make it available under the route "/app".
Is that possible? How would I make sure that the static files of the single page app are being used properly?
router.js of the Express application
const getRoutes = (mainController, authProvider, router) => {
const authorizationMiddleware = require("./authorizationMiddleware");
// app routes
router.get("/", (req, res, next) => res.redirect("/home"));
router.get("/home", mainController.getHomePage);
router.get("/app", (req, res) => {
???
});
...
project structure:
-src
--first projects dir
--data
--msal-express-wrapper
--public
--utils
--views
--app.js
--authorizatonMiddleware.js
--controller.js
--router.js
-appSettings.js
-package.json
-...

Why not using "require('express')()"

To create a simple Web server with NodeJS and Express, all the tutorials giving examples like this
const express = require('express');
const app = express();
app.listen(3000, () => console.log("Started"))
app.get('/', (req, res) =>{
res.send("Yaaa")
})
My question is, Why not write it like this?
const app = require('express')();
app.listen(3000, () => console.log("Started"))
app.get('/', (req, res) =>{
res.send("Yaaa")
})
The only difference is merging lines 1 and 2, as far as I'm not going to use/need the "express" constant anymore.
Is that wrong? And why?
As far as I know about express framework. Express exposes us to a lot of useful functions. If we don't require or import express in our application then, Our application will not be able to use those functions.
For example if you are creating some REST APIs then, We need our APIs to take form-data or raw as input. If we want to allow our application to take raw-json as input then, we need to add a middleware which consumes a built-in express function.
app.use(express.json())
If you want create an application that has a seperate folder for all the routes. Then, we use express.Routes() for that. That's how we create routes file in seperate routes folder:
import express from 'express';
import userController from 'path/to/user/controller';
const router = express.Router();
router.post('/follow/:userid/:following', helper.verifyToken, userController.follow);
router.get('/someRoute', userController.someAction);
export default router;
Similarly, If we want to serve some static HTML or some react-build. Then, we use express.static() inside app.use() middleware like this:
app.use(express.static('/path/to/static/folder'));
As long as you don't need access to the express module elsewhere in this file, then doing:
const app = require('express')();
is the best way.
But if we require to use to this express module again and again. Such as below
const app = require('express')();
const friendsRouter = require('express').Router();
Then it becomes a problem and you have require it again and again.
So to make our code less redundant, we use normal given approach. As in below code:
const express = require('express');
const app = express();
const friendRouter = express.Router();

How should I use proxy in a web app made with node.js and vanilla javascript?

I have a web app made in node.js and vanilla javascript. I wanna replace "http://localhost:4000/api/word" with "api/word" in the fetch api so that it works when the app's deployed on Heroku. I solved the issue by adding "proxy" : "http://localhost:4000" in package.json file when I used React for other apps but I don't know how to deal with the issue when I'm not using React.
server.js
const express = require("express");
const app = express();
const cors = require("cors");
const fs = require("fs");
const port = process.env.PORT || 4000;
app.use(express.json());
app.use(cors());
app.get("http://localhost:4000/api/word", function (req, res) {
fs.readFile("./wordlist.txt", (err, data) => {
if (err) throw err;
let wordList = data.toString().split("\n");
res.send(wordList);
});
});
main.js
function getWord() {
fetch("/api/word")
.then((res) => res.json())
.then((res) => {
...do something...
})
.catch((err) => console.log(err));
}
I tried the React way but it sends the get request to localhost:5500 which is the client side port.
Since your client and server are listening on different ports, I'm assuming your server isn't serving the client and that it has its own server. If the client doesn't need its own separate server, you can serve it from your express app by putting it in a directory and using express.static. Assuming you put the frontend code in a directory called public next to your server code, that would look like this:
app.use(express.json());
app.use(cors());
app.use(express.static(path.resolve(__dirname, 'public')));
If you do need to have a separate server for the client, there are modules just for this problem. http-proxy is a very popular one. I provided examples of how to use it here that could be easily adapted for any Node server, but there are many more in the docs.
Also just a sidenote, app.get("http://localhost:4000/api/word", function (req, res) should be app.get('/api/word' ...: your routes shouldn't define the scheme, host, and port.

How can I change the express static path based on the route?

I want to change the static path based on the route. For example (not working):
const app = express();
const appRouter = express.Router();
const adminRouter = express.Router();
appRouter.use(express.static('/path/to/app/static/assets');
adminRouter.use(express.static('/path/to/admin/static/assets');
app.use('/', appRouter);
app.use('/admin', adminRouter);
This also does not work:
const app = express();
app.use('/', express.static('/path/to/app/static/assets');
app.use('/admin', express.static('/path/to/admin/static/assets');
What I do not want to do is set both paths as static for the entire app:
// the following will expose both paths as static for the entire app
// this does not accomplish what I am trying to do
const app = express();
app.use(express.static('/path/to/app/static/assets');
app.use(express.static('/path/to/admin/static/assets');
Is this possible?
What you are trying to accomplish is not possible from your approach with express.static(). Your #2 approach does create virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function. Follow this for more info.
But what seems can be done is changing the path of express.static() in run time. Please follow through this git issue. Hope it helps.
I don't think it is possible with Express static middleware.
I was able to come up with a solution following the git issue posted by Tolsee. I published it to npm under the name express-dynamic-static.
Here is quick example of how to use it:
const express = require('express');
const dynamicStatic = require('express-dynamic-static')(); // immediate initialization
const path = require('path');
const app = express();
app.use(dynamicStatic);
app.get('/', (req, res) => {
dynamicStatic.setPath(path.resolve(__dirname, 'path/to/app/assets'));
// res.render...
}
app.get('/admin', (req, res) => {
dynamicStatic.setPath(path.resolve(__dirname, 'path/to/admin/assets'));
// res.render...
}

Categories