Develop Reference

How to add user authentication to docsifyjs

I am using docsifyjs to create a documentation. But I wanted to add Authentication to access the docs.
Basically we serve the docs with following commands
Initializing docsify
docsify init ./docs
After the init is complete, you can see the file list in the ./docs subdirectory.
index.html as the entry file
README.md as the home page
.nojekyll prevents GitHub Pages from ignoring files that begin with an underscore
We can now serve the mark-down files as HTML with following commands.
docsify serve docs
or
cd docs && python -m SimpleHTTPServer 3000
or
npx http-server docs
Here docsify is served by giving the path of initialized directory.
But I am not able to figure out how to serve this with expressJS. So that I can add authentication.
I have tried adding app.js to ./docs and added the following code but markdown files are not being rendered.
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
var app = express();
app.use(serveStatic('/', { 'index': ['index.html', 'index.htm'] }));
app.get('/', (req, res) => {
res.sendFile(path.join(__dirname, 'index.html'));
})
app.listen(8000);
Please help. Thanks

I have a public folder in my Node.js/Express.js project which contains some images. When I try to access those images through URL, I get 404 error

I have a Node.js/Express js project with the following folder structure
root
----bin
----controllers
----middleware
----models
----node_modules
----public
--------images
------------test.png
----routes
----views
I'm trying to figure out what URL I need to access in order to be served the test.png image that is inside the public/images folder. I thought it would be the following url:
http://localhost:3000/public/images/test.png
However, I get a "Not Found, 404" error

You should register an API middleware to serve the static files from the disk.
var express = require("express");
var app = express();
app.use(express.static('path/to/static/directory'))
in your case, you can use,
app.use(express.static('public'))
Refer https://expressjs.com/en/starter/static-files.html for additional details.

express js problem with showing html.index?

this is my first try with express js and I'm trying to display index.html ho is exist in ''public'' folder I don't know where is the problem
in the side server I have :
const express = require('express');
const app = express();
app.listen(3000, () => console.log('listening at 3000'));
app.use(express.static('public'));
and I reload the server with git bash ;
and I put my index.html inside ' public' directory and I rerun my server I put http://localhost:3000/
in my browser and shows "Cannot get " help please and thanks in advance

Please check first console express is running or not then trigger atleast one api like api.get('pathname' , callbak) Using route
Then raise question

you have to make route and render index.html
const express = require('express');
const app = express();
app.use(express.static('public'));
app.route('/',function () {
res.sendFile('index.html');
});
app.listen(3000, () => console.log('listening at 3000'));

You need to give the index option to express.static() like this:
app.use(express.static('public', {index: 'index.html'} ));
Keep in mind that express's static rendering doesn't make it into a full featured web server to serve files (like apache, nginx, and others).

Your code works as it is when the public directory is inside the Current Working Directory (i.e. The directory you are in when you run npm start, or node src/index.js).
If you want to make sure the directory is found wherever you start the script, use a path relative to your script using the native path module.
For example, if your folder structure is like this:
my-project/
|_ public/
| |_ index.html
|_ src/
| |_ index.js
|_ package.json
you need to go up one level (..):
const Path = require('path'); // <------- add this native module
const express = require("express");
const app = express();
app.listen(3000, () => console.log("listening at 3000"));
const publicPath = Path.join(__dirname, '../public'); // <-- get path
app.use(express.static(publicPath));
If the directory is in the same folder as your script, you can just do
Path.join(__dirname, 'public');

Configure express to call external API in proxy.conf.json in production

I have two apps running on heroku, myserverapi(spring boot) and client(Angular app). the server is running on myserver.heroku.com while the client is myclient.heroku.com currently my express server is only serving static files. I am new to express want to know how to make it access my proxy.conf.json file where I have declared the domain it should call. everything works fine locally with Cli but after deployment, it doesn't work.
proxy.Conf.json file below
{
"/api": {
"target": "https://mygramapi.herokuapp.com",
"secure": false,
"changeOrigin": true
}
}
And my express server.js
//Install express server
const express = require('express');
const path = require('path');
const app = express();
// Serve only the static files form the dist directory
app.use(express.static(__dirname + '/dist/mygram'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname +'/src'));
});
console.log(app);
// Start the app by listening on the default Heroku port
app.listen(process.env.PORT || 4000);
my API's all start with /api eg /api/login, /api/signup etc
is there a comprehensive way of handling this
thank you.
express-http-proxy has the solution but i have a few question about it, does it mean i delete the express.js file and how about my static files , im not sure to add this to my existing code, so im accessing both static files and api's
const url = require('url');
const proxy = require('express-http-proxy');
// New hostname+path as specified by question:
const apiProxy = proxy('https://myserverapi.heroku.com', {
forwardPath: req => url.parse(req.baseUrl).path
});
app.use('/api/*', apiProxy);
how do make them all work

Good day!
As you may know, proxy.conf.json can be used only for webpack dev server - this proxy configuration ignores when you've built the prod bundle and just serve it via express server. For your case, I can suggest to check this npm package: https://www.npmjs.com/package/express-http-proxy or try to setup nginx.

Create React App production build not listening to backend API

I have a backend Node API Express server and a React app in two separate folders (one for backend, one for React app). My backend runs on localhost:8000 and on my React app I have a proxy to this target via a setupProxy.js file using http-proxy-middleware. When I run the react app locally on localhost:3000, it can send requests to my backend correctly.
However, when I run yarn build on my React app for production, it doesn't seem to work. On the React app's repo, I have installed Express to serve the static files on localhost:9000. When I try to make a call to the backend, it just returns the index.html of the build folder. I'm wondering if I am doing something wrong or if I am missing something. What I would like is:
When user goes on localhost:9000, it shows the index.html of the build folder.
When a user clicks a button, it should send a request to localhost:8000, rather than sending back the index.html.
Here are some files in case it is needed:
src/setupProxy.js (this is on the React app)
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/auth/google', { target: 'http://localhost:8000/' }));
app.use(proxy('/api/**', { target: 'http://localhost:8000/' }));
};
server.js (also on React app, to serve the build folder)
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000, () => {
console.log('Listening on port 9000.');
});

Have you added the dependency of cors in your node API.
It is needed when we are communicating to different type of environment