angular 6 deploy node.js static path - node.js

When I set a static path public folder and set angular index in public:
app.js (node.js):
//node.js static file path
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', indexRouter);
app.use('/users', usersRouter);
app.get('/*', (req, res) => {
//angular index
res.sendFile(path.join(__dirname, 'public', 'index.html'));
});
There are some problems with this setup:
(1)I can't put all angular build files in a specific folder(like put in dist folder), index.html will not be able to take the correct location of the relevant file(like runtime.js)
(2)Some files may be stored in the public folder, such as files uploaded by users. angular build will be clear all files in the folder(public), so I have to pack it in another folder(ex:dist) and manually copy all the files to the public folder. This setting is quite inconvenient, and every time you update it, make sure the old file is cleared.
Update
app.js (node.js):
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'public/dist', 'index.html'));
// or res.sendFile(path.join(__dirname, 'public', 'dist/index.html'));
});
angular.json:
"outputPath": "server/public/dist/",
angular build
ng build --prod --deploy-url /dist/ --base-href /dist/
When I link index url:
http://localhost:3000/
angular router will be render /index like http://localhost:3000/index,
but node.js it's render http://localhost:3000/dist/index
Can't the URL hide the folder path dist?
Is this the correct way to set up?

For run project on live domain. Follow this steps.
Step 1: Make a build with this command. ng build --prod.
Step 2: In Dist/index.html , Update base URL with your domain name.
Step 3: Make ZIP file of dist folder.
Step 4: Copy and paste ZIP folder into you respective server. you can use filezilla for that.
Step 5: Unzip folder.
Step 6: Update dist folder name to your project folder name.
Step 7: Check on browser.

Related

I am trying to serve my React build to node/express app but I am getting an error

I am still learning the whole MERN stack technology. I am trying to follow a tutorial to serve my Create React App build files to my backend but I keep getting error. The error I am getting is this:
Error: ENOENT: no such file or directory, stat 'C:\Users\kingsley\Desktop\blogfullstack \api\public\index.html'
This is my project structure:
I served the react build files in a folder called public inside my server folder. The index.html file is there as well.
In my server app.js file, I wrote the following codes according to the course tutorial:
app.use(express.json());
app.use( express.static(path.join(__dirname, 'public', 'index.html')))
After the above codes, I have my API end points which are 9 in total such as:
app.use("/api/v1/auth", authRoute);
app.get('/*', (req, res)=>{
res.sendFile(path.join(__dirname, 'public', 'index.html'));
})
module.exports = app;
What could I be doing wrong? I would love to learn and fix this.

Using express.static, path.join, res.sendFile to serve files

I have a React app + Node server with the following architecture from the root :
/build
/src
server.js
package.json
etc.
In production, I want to get to the index.html inside the folder "build", so I have this code in the server, but I think I did it wrong :
server.js
if (process.env.NODE_ENV === "production") {
app.use(express.static(path.join(__dirname, "build")));
app.get("*", function(req, res) {
res.sendFile(path.join(__dirname, "build", "index.html"));
});
}
Can somebody help me ? Thanks
There is nothing wrong with your code, though I don't think there is a need to define a route GET "*". When you serve public static files, they can be accessed directly through the browser.
For now, to debug your app:
Make sure that the "build" directory exists and actually contains an index.html
Log 'NODE_ENV' environment variable, just to make sure that it's set correctly to 'production'.

Facing issue to upload build on live server

I have upload my angular production build on live. And I'm missing some thing but I don't know what is that.
In build/index.html I have set this in base URL.
<base href="http://0.0.0.0:3000/admin/"> // Instead of 0.0.0.0 I have set my EC2 instance's elastic ip address
I have set /var/www/html/myapp/admin. Hear in admin folder angular build is that.
And my node server is at /var/www/html/app.js
app.js
To allow all admin panel pages I have add this code in my app.js file.
app.use('/', express.static('./admin'))
app.get('*', (req, res) => {
res.sendfile('./admin/index.html')
})
When you use app.use('/', express.static('./admin')), the static files will be served in the root directory, for example, http://0.0.0.0:3000/main.js, but because of the base tag, it will try to find the resource at http://0.0.0.0:3000/admin/main.js.
To fix it, change the path of the static files, like so:
app.use('/admin', express.static('./admin'));
Also, I don't recommend editing the base tag manually, you can set the base url in the build command, like so:
ng build --prod --base-href="http://0.0.0.0:3000/admin/"

how to run angular 6 app with nodejs api on production?

Hi I am new to angular6
In development mode I have worked in angular 4200 port and node in different port (8080) in my operations.
but now I want to move my app into production mode.
for that I had build my angular project by using ng build command. after i get a dist folder is created on the root folder.
so i went to server.js file
here I had add my static file
app.use(express.static(path.join(__dirname,'dist/MDProject')));
app.use('/',(req,res)=>{
res.sendFile(path.join(__dirname,'dist/MDProject/index.html'))
});
click here to read my server.js file
by this
when ever I redirect to my local host it is opening but
in server.js side i didn't get any response.
when ever I try to login I am getting this error.
can anyone help me to solve this
I think there are 2 things wrong here in your code.
First, update your code
From:-
app.use('/',(req,res)=>{
res.sendFile(path.join(__dirname,'dist/MDProject/index.html'))
});
To:- This code needs to be added just before your app.listen(app.get('port')) code
app.get('*', function(req, res) {
res.sendfile('./public/MDProject/index.html');
// load the single view file (angular will handle the page changes on the front-end)
});
Second, Serve your file from your public folder(In your case I think it is the dist folder). So update your code like this.
app.use(express.static(__dirname + '/dist/MDProject'));
after I removed this line in my server.js file
app.engine('html', require('ejs').renderFile);
app.set('view engine', 'html');
and I paste this line before port creation.
app.use(express.static(path.join(__dirname,'dist/MDProject')));
app.use('/',(req,res)=>{
res.sendFile(path.join(__dirname,'dist/MDProject/index.html'))
});
now it is working fine.
Use this to go to index page.
app.get('*', (req, res) => {
res.sendfile('./public/MDProject/index.html');
})
with that you have to make folder in public in node
app.use('/', express.static('/dist/MDProject'))
Then in your app dist folder -> index.html
<base href="http://192.168.1.1:3000/admin-panel/">
This is my working code. Let me know if you have still any issue. :)

Serving express static files issue

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

Resources