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
Related
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.
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
I have a dist folder containing CSS, fonts, JS folder and an index.html file minimized for Vue.js, ready to deploy and use. I want to use Node.js to run this application. How can I set this up to just run npm run server and have it deployed on a specific port requested? Not sure how to structure this or if I need to build it in a specific way to run this Vue app. Any help would be greatly appreciated.
Since Vue is only a frontend library, the easiest way to host it and do things like serve up assets is to create a simple Express friendly script that you can use to start a mini-web server. Read up quickly on Express if you haven’t already. After that, add express:
npm install express --save
Now add a server.js file to your project’s root directory :
// server.js
var express = require('express');
var path = require('path');
var serveStatic = require('serve-static');
app = express();
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 5000;
var hostname = '127.0.0.1';
app.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});
after that you could run :
node server
and your project will be served at the given host and port
Assuming that you have already the dist directory, if you don't have it run :
npm run build
in order to generate it
I have a current front-end only Angular 2 application using the Angular-CLI and NPM. I want visitors to be able to send me emails through the contact form.
For this I obviously need a back-end, express and node, in which I have no experience in using.
I need to intergrate express and node into my app but I dont know how to do this correctly.
I have found THIS similar question on SO but its not relevant to my situation.
Other tutorials only show how to scaffold a MEAN stack app not intergrate the backend after the front end has been built.
What I would like to know:
How do I set up my Angular 2 App to use express and node for the back end?
What are the relevant files I need?
Can I do this by using the Angular-CLI?
The best way to setup a project that is built using angular-cli to use a nodejs/express backend is to simple create an express project that serves up a directory. In your client project, if it has been created using the angular-cli, you should be able to just type in ng build and it will compile everything into a dist directory.
From there, you can create an express server that serves up that dist directory like so:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
The most simple server you could build would probably something like
var express = require('express')
var path = require('path');
var app = express()
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!')
});
This will intercept all routes and redirect them to the index.html file in the dist/ folder that was created.
For more information on how to set this up and some more advanced settings, check out these links:
http://expressjs.com/en/starter/installing.html
https://scotch.io/tutorials/mean-app-with-angular-2-and-the-angular-cli
Just think about the dist/ folder as static files that will be served over an express server, and because routing and everything is handled through angular, you'll be set.
There is a style.css in public, but I can't seem to make the express static option work. I deleted express and have done npm install express, but still it isn't working. I just get a 404 error.
var express = require('express')
, app = express.createServer();
app.use(express.static(__dirname+'/public'));
app.listen(8080, "127.0.0.1");
I have added an app.get() block to insure express is properly running, but I am still unable to request the static file.
An important detail that I have overlooked on multiple occasions now is that "public" is not in the URL of the static content you are delivering.
Alfred example nails it but it is easy to miss. The location of the README file is not localhost:8080/public/README, but simply localhost:8080/README
Works just fine for me.
app.js
var express = require('express')
, app = express.createServer();
app.use(express.static(__dirname+'/public'));
app.listen(8080, "127.0.0.1");
mkdir public
cd public
touch README
README
test
$ curl http://localhost:8080/README
test
$ npm ls
connect#1.6.1
express#2.4.4
app.use(express.static('public'));
http://expressjs.com/4x/api.html#express.static