angular 6 deploy node.js static path
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?
node.js angular
asked Nov 14 '18 at 6:04
Albert ChenAlbert Chen
142314
|
show 1 more comment
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?
node.js angular
asked Nov 14 '18 at 6:04
Albert ChenAlbert Chen
142314
--deploy-url /public/ --base-href /public/ --output-path c:inetpubwwwrootpublic
– pixelbits
Nov 14 '18 at 6:10
--output-path c:inetpubwwwrootpublicbuild public folder? that will be clear public folder.
– Albert Chen
Nov 14 '18 at 6:33
@AlbertChen In short you want to make a build to upload on live ? Is it your main aim to do this ?
– Sachin Shah
Nov 14 '18 at 7:16
@SachinShah I don't know how to be a better deployment process. I want to know what kind of method is appropriate. When I use the angular + node.js
– Albert Chen
Nov 14 '18 at 7:23
@AlbertChen So you need the steps to upload app on live. Am I right ?
– Sachin Shah
Nov 14 '18 at 8:57
|
show 1 more comment
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?
node.js angular
asked Nov 14 '18 at 6:04
Albert ChenAlbert Chen
142314
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?
node.js angular
node.js angular
asked Nov 14 '18 at 6:04
Albert ChenAlbert Chen
142314
asked Nov 14 '18 at 6:04
Albert ChenAlbert Chen
142314
edited Nov 14 '18 at 7:10
Albert Chen
asked Nov 14 '18 at 6:04
Albert ChenAlbert Chen
142314
asked Nov 14 '18 at 6:04
Albert ChenAlbert Chen
142314
asked Nov 14 '18 at 6:04
Albert ChenAlbert Chen
142314
142314
--deploy-url /public/ --base-href /public/ --output-path c:inetpubwwwrootpublic
– pixelbits
Nov 14 '18 at 6:10
--output-path c:inetpubwwwrootpublicbuild public folder? that will be clear public folder.
– Albert Chen
Nov 14 '18 at 6:33
@AlbertChen In short you want to make a build to upload on live ? Is it your main aim to do this ?
– Sachin Shah
Nov 14 '18 at 7:16
@SachinShah I don't know how to be a better deployment process. I want to know what kind of method is appropriate. When I use the angular + node.js
– Albert Chen
Nov 14 '18 at 7:23
@AlbertChen So you need the steps to upload app on live. Am I right ?
– Sachin Shah
Nov 14 '18 at 8:57
|
show 1 more comment
--deploy-url /public/ --base-href /public/ --output-path c:inetpubwwwrootpublic
– pixelbits
Nov 14 '18 at 6:10
--output-path c:inetpubwwwrootpublicbuild public folder? that will be clear public folder.
– Albert Chen
Nov 14 '18 at 6:33
@AlbertChen In short you want to make a build to upload on live ? Is it your main aim to do this ?
– Sachin Shah
Nov 14 '18 at 7:16
@SachinShah I don't know how to be a better deployment process. I want to know what kind of method is appropriate. When I use the angular + node.js
– Albert Chen
Nov 14 '18 at 7:23
@AlbertChen So you need the steps to upload app on live. Am I right ?
– Sachin Shah
Nov 14 '18 at 8:57
--deploy-url /public/ --base-href /public/ --output-path c:inetpubwwwrootpublic
– pixelbits
Nov 14 '18 at 6:10
--deploy-url /public/ --base-href /public/ --output-path c:inetpubwwwrootpublic
– pixelbits
Nov 14 '18 at 6:10
--output-path c:inetpubwwwrootpublic build public folder? that will be clear public folder.– Albert Chen
Nov 14 '18 at 6:33
--output-path c:inetpubwwwrootpublic build public folder? that will be clear public folder.– Albert Chen
Nov 14 '18 at 6:33
@AlbertChen In short you want to make a build to upload on live ? Is it your main aim to do this ?
– Sachin Shah
Nov 14 '18 at 7:16
@AlbertChen In short you want to make a build to upload on live ? Is it your main aim to do this ?
– Sachin Shah
Nov 14 '18 at 7:16
@SachinShah I don't know how to be a better deployment process. I want to know what kind of method is appropriate. When I use the angular + node.js
– Albert Chen
Nov 14 '18 at 7:23
@SachinShah I don't know how to be a better deployment process. I want to know what kind of method is appropriate. When I use the angular + node.js
– Albert Chen
Nov 14 '18 at 7:23
@AlbertChen So you need the steps to upload app on live. Am I right ?
– Sachin Shah
Nov 14 '18 at 8:57
@AlbertChen So you need the steps to upload app on live. Am I right ?
– Sachin Shah
Nov 14 '18 at 8:57
|
show 1 more comment
1 Answer
1
active
oldest
votes
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.
answered Nov 15 '18 at 2:29
Sachin ShahSachin Shah
1,6551515
thank, but I want to know more details about how to set angular and node.js seeting. Like about node.js app.js, router, static path.., angular router, build..
– Albert Chen
Nov 15 '18 at 2:55
@AlbertChen For this points , you have to do some googling and implement by your own. I can't explain this all stuff hear. I can just help you either in code or in any concept. For your point's I suggest you to learn all stuff from any official doc or from turorialspoint.
– Sachin Shah
Nov 15 '18 at 3:08
ok. I have already looked for relevant tutorial, but these tutorial have not talked about the deployment part, or just a brief explanation.
– Albert Chen
Nov 15 '18 at 7:05
@AlbertChen I have already give to deployment part in my answer.
– Sachin Shah
Nov 15 '18 at 7:07
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294049%2fangular-6-deploy-node-js-static-path%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
answered Nov 15 '18 at 2:29
Sachin ShahSachin Shah
1,6551515
thank, but I want to know more details about how to set angular and node.js seeting. Like about node.js app.js, router, static path.., angular router, build..
– Albert Chen
Nov 15 '18 at 2:55
@AlbertChen For this points , you have to do some googling and implement by your own. I can't explain this all stuff hear. I can just help you either in code or in any concept. For your point's I suggest you to learn all stuff from any official doc or from turorialspoint.
– Sachin Shah
Nov 15 '18 at 3:08
ok. I have already looked for relevant tutorial, but these tutorial have not talked about the deployment part, or just a brief explanation.
– Albert Chen
Nov 15 '18 at 7:05
@AlbertChen I have already give to deployment part in my answer.
– Sachin Shah
Nov 15 '18 at 7:07
add a comment |
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.
answered Nov 15 '18 at 2:29
Sachin ShahSachin Shah
1,6551515
thank, but I want to know more details about how to set angular and node.js seeting. Like about node.js app.js, router, static path.., angular router, build..
– Albert Chen
Nov 15 '18 at 2:55
@AlbertChen For this points , you have to do some googling and implement by your own. I can't explain this all stuff hear. I can just help you either in code or in any concept. For your point's I suggest you to learn all stuff from any official doc or from turorialspoint.
– Sachin Shah
Nov 15 '18 at 3:08
ok. I have already looked for relevant tutorial, but these tutorial have not talked about the deployment part, or just a brief explanation.
– Albert Chen
Nov 15 '18 at 7:05
@AlbertChen I have already give to deployment part in my answer.
– Sachin Shah
Nov 15 '18 at 7:07
add a comment |
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.
answered Nov 15 '18 at 2:29
Sachin ShahSachin Shah
1,6551515
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.
answered Nov 15 '18 at 2:29
Sachin ShahSachin Shah
1,6551515
answered Nov 15 '18 at 2:29
Sachin ShahSachin Shah
1,6551515
answered Nov 15 '18 at 2:29
Sachin ShahSachin Shah
1,6551515
answered Nov 15 '18 at 2:29
Sachin ShahSachin Shah
1,6551515
1,6551515
thank, but I want to know more details about how to set angular and node.js seeting. Like about node.js app.js, router, static path.., angular router, build..
– Albert Chen
Nov 15 '18 at 2:55
@AlbertChen For this points , you have to do some googling and implement by your own. I can't explain this all stuff hear. I can just help you either in code or in any concept. For your point's I suggest you to learn all stuff from any official doc or from turorialspoint.
– Sachin Shah
Nov 15 '18 at 3:08
ok. I have already looked for relevant tutorial, but these tutorial have not talked about the deployment part, or just a brief explanation.
– Albert Chen
Nov 15 '18 at 7:05
@AlbertChen I have already give to deployment part in my answer.
– Sachin Shah
Nov 15 '18 at 7:07
add a comment |
thank, but I want to know more details about how to set angular and node.js seeting. Like about node.js app.js, router, static path.., angular router, build..
– Albert Chen
Nov 15 '18 at 2:55
@AlbertChen For this points , you have to do some googling and implement by your own. I can't explain this all stuff hear. I can just help you either in code or in any concept. For your point's I suggest you to learn all stuff from any official doc or from turorialspoint.
– Sachin Shah
Nov 15 '18 at 3:08
ok. I have already looked for relevant tutorial, but these tutorial have not talked about the deployment part, or just a brief explanation.
– Albert Chen
Nov 15 '18 at 7:05
@AlbertChen I have already give to deployment part in my answer.
– Sachin Shah
Nov 15 '18 at 7:07
thank, but I want to know more details about how to set angular and node.js seeting. Like about node.js app.js, router, static path.., angular router, build..
– Albert Chen
Nov 15 '18 at 2:55
thank, but I want to know more details about how to set angular and node.js seeting. Like about node.js app.js, router, static path.., angular router, build..
– Albert Chen
Nov 15 '18 at 2:55
@AlbertChen For this points , you have to do some googling and implement by your own. I can't explain this all stuff hear. I can just help you either in code or in any concept. For your point's I suggest you to learn all stuff from any official doc or from turorialspoint.
– Sachin Shah
Nov 15 '18 at 3:08
@AlbertChen For this points , you have to do some googling and implement by your own. I can't explain this all stuff hear. I can just help you either in code or in any concept. For your point's I suggest you to learn all stuff from any official doc or from turorialspoint.
– Sachin Shah
Nov 15 '18 at 3:08
ok. I have already looked for relevant tutorial, but these tutorial have not talked about the deployment part, or just a brief explanation.
– Albert Chen
Nov 15 '18 at 7:05
ok. I have already looked for relevant tutorial, but these tutorial have not talked about the deployment part, or just a brief explanation.
– Albert Chen
Nov 15 '18 at 7:05
@AlbertChen I have already give to deployment part in my answer.
– Sachin Shah
Nov 15 '18 at 7:07
@AlbertChen I have already give to deployment part in my answer.
– Sachin Shah
Nov 15 '18 at 7:07
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294049%2fangular-6-deploy-node-js-static-path%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
--deploy-url /public/ --base-href /public/ --output-path c:inetpubwwwrootpublic
– pixelbits
Nov 14 '18 at 6:10
--output-path c:inetpubwwwrootpublicbuild public folder? that will be clear public folder.– Albert Chen
Nov 14 '18 at 6:33
@AlbertChen In short you want to make a build to upload on live ? Is it your main aim to do this ?
– Sachin Shah
Nov 14 '18 at 7:16
@SachinShah I don't know how to be a better deployment process. I want to know what kind of method is appropriate. When I use the angular + node.js
– Albert Chen
Nov 14 '18 at 7:23
@AlbertChen So you need the steps to upload app on live. Am I right ?
– Sachin Shah
Nov 14 '18 at 8:57