I have set up 2 static directories in express node as below.
app.use(express.static(__dirname + '/admin_public'));
app.use(express.static(__dirname + '/client_public'));
My doubt is whether I can connect the express server to angular 2 like below:
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/admin_public/index.html'));
});
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '/client_public/index.html'));
});
If the above 2 res.sendFile() are correct, when I build my hybrid app for angular.
1) How do I access my server (will it be something like: localhost:8080/client/public and localhost:8080/admin_public) for 2 different frontends, one for client and one for admin?
2) Is it the right way of connecting the express to 2 index.html's? If not, how should it be?
To create a virtual path prefix (where the path does not actually exist in the file system) for files that are served by the express.static function, specify a mount path for the static directory, as shown below:
app.use('/client', express.static(path.join(__dirname, 'client/public')));
app.use('/admin', express.static(path.join(__dirname, 'admin/public')));
Now, you can load the files that are in the public directory from the /client or /admin path prefix.
localhost:8000/client/
localhost:8000/admin/
Related
I have deloyed a nodejs and angular app on heroku but after deployed routes are not working.
here is my webiste - https://murti123.herokuapp.com
with routes - enter link description here
but with routes it gives a can't get / errror.
i don't know how to resolve it
Here is My project Structureenter code here
You need to resolve your path to the frontend application
so assume that in /public folder you have the dist files from the builded frontend application
app.use(express.static(__dirname + "/public"));
and here you resolve that index.html for any route
app.get("*", function (req, res) {
//path is required at the top of the file ofcourse
//const path = require("path");
res.status(200).sendFile(path.resolve(__dirname + "/public/index.html"));
});
I cannot access the routes that I have set up in my app when running from the build version. I can access them on dev enviroment though when my react app runs at a different port than the server.
I have included the below in my express server in order for it to serve the react app and only the root page is showing.
app.use(express.static(path.join(__dirname, 'build')))
app.get('/', function (req, res) {
res.sendFile(path.join(__dirname, 'build', 'index.html'))
})
React Router does all the routing in the browser, so you need to make sure that you send the index.html file to your users for every route.
This should be all you need:
app.use('/static', express.static(path.join(__dirname, '../client/build//static')));
app.get('*', function(req, res) {
res.sendFile('index.html', {root: path.join(__dirname, '../../client/build/')});
});
I found the solution of my issue.
I was having the HTML anchor tags instead of the Link attribute of react-router to my code.
Replaced them accordingly and my app is operating normaly.
const express = require('express');
const path = require('path');
const app = express();
app.listen(9000);
app.get('/test', function(req, res) {
console.log("not being hit");
res.send(200);
});
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', function (req, res) {
console.log("always hits");
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
This seems like such a simple problem but my brain is starting to turn to mush.
Here's the details:
I have run build on a react app and the index.html file resides in the build folder, and I want this served via express.
I want express to prioritize /test first, and if it's not /test, then I want it to serve the index.html file in the build folder.
If you go to /test, it is skipped and always hits the /* route. If you remove the wild card and use / instead, neither routes will hit if you go to / or /test in the browser. However, index.html is still served and it looks like that's because of the static middleware.
Everything I have read suggests that order in express is important, but I feel like I'm losing my damn mind and I'm starting to slowly descend into madness.
Thanks in advance.
I am having issues w/ serving static files in my current Express app, although I've done a similar setup in a bunch of other apps.. My folder structure is as follows:
/rootfolder/
/app
package.json
/client
/dist
/static
index.html
/server
/src
index.js
Relevant part of my server/src/index.js:
app.use(express.static(path.join(__dirname, "client", "dist")));
Where __dirname = /rootfolder/app/server/src
And when the user hits the / endpoint:
app.get("/", (req, res) => {
res.sendFile(appRoot.path + "/client/dist/index.html");
});
Where appRoot.path = /rootfolder/app
When I hit the / endpoint, I get a status 200 with the following text:
/rootfolder/app/client/dist/index.html
From what I can tell, the files are coded relative to each other correctly.. Does anyone know what I might be doing wrong?
Thanks in advance!
You're using res.send() instead of res.sendFile()
Also I suggest resolving your path via the path module, instead of concatenating a string.
const path = require('path')
app.use(express.static(path.join(__dirname, 'client', 'dist', 'static')))
And for the response of /:
res.sendFile(path.join(__dirname, 'client', 'dist', 'index.html')))
Try
app.use(express.static(path.join(__dirname,'client','dist')));
It basically gets the root directory and combines it with /client+ /dist + /static to give you the full route, without being relative path.
Now Let's call rootdirectory/client/dist X. That is the main directory for static files
If you have other files that are static but not in the same folder, you will have to give relative path from the X directory
Example:
app.get('/',function(req,res){
res.sendFile('/static/data.txt');
}
In the example above you indicate that the static file(data.txt) is located in the X/static directory.
Therefore => rootDirectory/client/dist/static/data.txt
2nd Example:
Let's say you have a folder in dist called images which you want to only store images.
when you are giving routes, you MUST use /images/filename.extention
My express (3.X) server looks like:
express = require "express"
app = express()
app.configure ->
app.use express.static(__dirname + '/public')
app.use app.router
console.log __dirname + '/public'
app.get "*", (req, res) ->
res.sendfile "index.html"
app.listen 1234
console.log "Server listening on port 1234"
I'm using it for an AngularJS project, so if anything is in the /public folder, I want it served directly. My /public folder has a scripts and templates folder in it.
However, when I go to http://localhost:1234/public/scripts/app.js, I get the contents of index.html
In this scenario, /public is your webroot. You need to change your reference to http://localhost:1234/scripts/app.js.