How to pass id of object to another page? - javascript

I have full stack application which i deployed on netlify, my frontend structure (vanilaJS) is following:
client
-index.html
-training.html
-scripts
-style
My backend is in Express and successfuly deployed to Heroku. I have the following rutes:
const express = require('express')
const app = express()
const trainingRoute = require('./routes/training')
app.use('/training', trainingRoute)
In the index.html on frontend i have card:
<div class="trening-plan-container">
<div class="plan-btn">
<button>Pogledaj</button>
</div>
</div>
452153221489 is id of item in database. When i click on link, i get my url:
https://example.netlify.app/training/452153221489
and i get 404 status, not found.
How can i make request to my backend route /training/452153221489 which i have defined in
app.use('/training', trainingRoute) :
const express = require('express')
const router = express.Router()
const {
getTrainingPlan,
} = require('../controllers/trainingPlan')
router.route('/:id').get(getTrainingPlan)
module.exports = router
When i use fetch, everything works, because i specify full url
https://trening-bek.herokuapp.com/training/452153221489
After days of research i have found proxy might be the solution but it doesn't work.
I could use Pogledaj then retreive id and make fetch api call but I'm not sure that's the way it should be done.
Is it bad practice to seperate frontend and backend on two servers?

Related

Firebase Authentication via Server Side to access routes

I am using sessionStorage and also firebase authentication for email and password.
In my server.js I am wondering how can I make it so that if a user is not logged in they cannot access a route, or rather be redirected to the login route instead.
The firebase sdk I am using is only usable via the client side. Is there any documentation to help that I have been unable to find.
Please let me know if I need to clarify my question more and I will do my best to do so.
Here is my server.js:
const express = require('express');
const admin = require('firebase-admin');
const bcrypt = require('bcrypt');
const path = require('path');
let serviceAccount = require("./1234.json");
admin.initializeApp({
credential: admin.credential.cert(serviceAccount)
});
let staticPath = path.join(__dirname,"public");
const app = express();
app.use(express.static(staticPath));
app.use(express.json());
app.get('/login', (req,res) => {
res.sendFile(path.join(staticPath, "form.html"));
})
app.get('/seller', (req,res) => {
// if(!user) res.redirect('/login');
res.sendFile(path.join(staticPath, "seller.html"));
})
Edit:
So far the only thing that helps me with this is by creating a seller.js
and inserting this code here, but I am unsure of if this method is safe or if there is a way to hide this from being manipulated:
body = document.getElementsByTagName('BODY')[0];
user = JSON.parse(sessionStorage.user);
if(user && user.seller){
console.log('Allow Access')
} else{
console.log('Deny')
body.innerHTML = `
<div class="sticky" id="nav"></div>
<div style="padding:300px">
<center>You do not have permission to view this page.</center>
</div>
<div id="footer"></div>
`;
}
You can use the firebase-admin package to verify the token on the server. If the verification passes, you can continue with route logic. To make things simple, you could wire up a middleware in Express that verifies the token, rather than repeating the calls for authenticated routes.
Relevant documentation: https://firebase.google.com/docs/auth/admin/verify-id-tokens#web
Also, you should not rely on client-side scripting to verify a user's authentication status if you're trying to restrict resources on a server. It would be trivial for someone to find the endpoints being used, and, assuming there's no logic on the server to verify the user, they could potentially retrieve sensitive information.

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.

How can I setup an OpenID Connect authentication with Node Js?

here is the thing. I have my app that has separated back-end and front-end into two different project (back-end with Node-JS, and front-end with Vue-JS). I got a home page with a button that should redirect the user to the authentication server to log in.
So i made an "on-click" function in my homePage.vue that will consume a function from my api.
I've read a lot of documentation and seen some examples. But to be honest, during those past weeks, even if I tried, I still do understand nothing about how authentication works.
You can see below the js file i wrote inspired by examples that i found:
auth.js
const express = require('express');
const { auth } = require('express-openid-connect');
const app = express();
app.use(
auth({
issuerBaseURL: 'myDomainUrl',
baseURL: 'http://localhost:8080',
clientID: 'myClient_ID',
secret: 'aaaaaaaaaaaaaaaaaaaa',
idpLogout: true,
authRequired: false,
})
);
module.exports = app;
There is also the route with the function that I try to implement:
auth.route.js
module.exports = app => {
var router = require("express").Router();
router.get('', location.replace('myDomainUrl'));
app.use('/api/login', router);
};
I don't know if it's important but my back-end runs on the port 4000 and my front-end runs on the port 8080.
If someone can explain me how I can do to make my authentication work and what I have to change, it would be great.
Thanks you in advance, I hope I was clear enough about my problem. If not, do not hesitate to ask me what was not clear.

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 to use socket.io across diffrent routes in node.js

I have different routes in my node js application and i have to use socket.io in every route to make my node and react js application realtime. But, i have the below structure of my node js application.
router.js
const express = require('express');
const router = express.Router();
const worksheetController = require('../controllers/worksheet')
const attendenceController = require('../controllers/attendence')
router.route('/worksheets')
.get(
worksheetController.getWorksheet
)
.post(
worksheetController.validateWorksheet,
worksheetController.addWorksheet,
attendenceController.markAttendence
)
router.route('/attendances')
.get(
attendenceController.getAttendance
)
module.exports = router;
server.js
const express = require('express');
const router = require('./router');
const app = express();
app.use('/api', router);
app.listen('5000', () => {
console.log('Listening on port');
});
module.exports = app;
So, I want to know
1) Should i need to use http module to create a server, if i need to use socket.io.
2) How can i use socket.io for diffrent routes.
I found posts that match's to my question on stackoverflow, which is this, this and this. But i don't think, that works for me. So please help me.
You can use http module or other module in document of socket.io for to use socket.io
I don't sure your idea. But when you want implement socket.io. I think you should run another node app. (Meaning you have 2 nodejs app. 1 for node http normally and 1 for socket.io app). After you can use path option when init socket.io app https://socket.io/docs/server-api/#new-Server-httpServer-options. Because when you deploy to production. You should run your socket.io app with beside of proxy serve (ex: nginx). Socket.io basically support multi transport and protocol. So if use with http restful. How about config your connection mapping from nginx to socket.io app, how you setup error handler ?.
In your case:
+ Create new file socket.js:
// socket.js
var http = require('http')
var socket_io = require('socket.io')
function init_socket(app) {
const server = http.Server(app)
const io = socket_io(server, { path: 'your-path-want-for-socket-io' }) // default: /socket.io/
}
import {init_socket} from 'socket.js'
init_socket(app)

Categories