express js problem with showing html.index? - javascript

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');

Related

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

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

Can't serve static files with feathersjs express app

I need to serve some image files from my app which are on a root folder called uploads.
I am setting the middleware on the same level as my folder. The code currently looks like this:
const express = require('#feathersjs/express')
const Path = require('path')
app.use('/uploads', express.static(Path.join(__dirname, `uploads`)))
If I try to do fetch a using localhost:[MY_PORT_NUMBER]/uploads/myImage.jpg I am currently getting a 404 and in the logs it is just getting the NotFound: Resource not found message.
What am I doing wrong?
Try this:
app.use('/uploads', express.static(Path.join(__dirname, '/../uploads')));

How to render a html page, which exists in one of the subfolders and has its own stylesheets and its own script, using express and node?

I want to render a HTML page, which exists in one of the sub folders and has its own style-sheets and its own script, using express and node, I have downloaded separate login page, etc, which I want to render in this manner.
Let's say you have the following file system:
server.js (file)
website (directory)
-> index.html
style.css
code.js
To serve your entire website directory (the index.html file, the style.css file and other files), you will need to use the express built-in middleware function express.static.
const express = require('express')
const app = express()
app.use(express.static(website)) // your directory you want to expose
app.listen(3000, () => console.log('Listening on *3000!')) // 3000 is just an example port

How to setup simple static server where path '/' points to index.html within dirrectory?

There might be a very simple solution to this question, but I am not able to find answer online and due to my practice with node I can't figure it out either.
I'm trying to set up a simple server.js file that listens on port 80 and serves /dist/index.html file when users enter root address, so example.com
This is my project structure
dist/
index.html
bundle.js
node-modules/
package.json
server.js
You can create a static server with express:
server.js
var express = require('express');
var app = express();
app.use(express.static(__dirname + '/dist'));
app.listen(8080, function() {
console.log('Listening on port: ' + 80);
});
You simply run node server.js to get the static server. This app can also be deployed.
http-server is a simple method of serving from your file system. Install that, then just run http-server -p X in the command line in your project folder, substituting your port number for X

Categories

Resources