I am currently serving angular1 application over node js app.
I want to serve my angular1 app as well as angular2 app from same domain with this node server.
I have following setting in my app.js of node js file:
var staticDir = nodeEnv == 'development' ? path.join(__dirname, '/home/sovf/ang1/') : '/data/project/angular/app';
My angular1 project directory is here: /home/sovf/ang1/
My angular2 project directory is here: /home/svof/ang2/
How can I configure the staticDir to use '/home/svof/ang2/' , when the url matches /ang2/*
I have tried enogh to look for resources and node configuration for this but could not find anything. Can any one please help here.
You can create a new instance of express.static that uses /home/svof/ang2 as root directory (where it should look for the static resources), and "mount" that instance on /ang2, so it will only match requests that start with that prefix:
app.use('/ang2', express.static(path.join(__dirname, '/home/svof/ang2')));
Related
I have a server running with express. Let's say I have the following folder structure:
- public
-- image1.png
-- image2.png
-- image3.png
- src
-- app.js
In the app.js I setup the server using express and I do:
const app = express();
app.use(express.static('public'));
Now, If I start the server and go to localhost:port/image1.png I get image1.png displayed.
I am confused because the path I specified is incorrect, kinda. If I do:
app.use(express.static(path.join(__dirname, '..', 'public'))
I get the same result. Why they work the same?
it all depends on "how you start your server"
if you do:
node src/app.js
it will work because from a Node.js perspective, the path public exists in the file system from where the node process started,
now, if you do:
cd src
node app.js
it will not work because there's no public folder in the file system from where the node process started
behind the scenes, Express.js is using the serve-static package,
if you look in the source code, it is using path.resolve to load the folder:
https://github.com/expressjs/serve-static/blob/master/index.js#L65
and looking at the Node.js documentation for path.resolve, we have:
"If no path segments are passed, path.resolve() will return the absolute path of the current working directory."
So, resolving public from the current working directory of node when using node src/app.js, the folder exists!
that's why it works! :)
I finished my react application, and I already built it. I also have my express app for my server side ready. I saw in a video that you can pass the files from the "build" folder to the "public" folder of the server app, but this was done in a basic json-server. I tried to do the same in my express app folder, but it didn't work. Could you please tell me where should I bring my "build" folder? Thank you!
I think you want to serve you react app via express
You can try using below code to do it it will serve your react build folder via express
//define this static path which will point to your build folder inside your server folder
let root = path.join(__dirname, 'client/build/')
app.use(express.static(root))
//route you need to define in your main server file
app.get("*",(req,res)=>{
res.sendFile(path.join(__dirname, '/client/build/index.html'));
})
run the express app and then type the url in browser you will get redirected to react app
I’m experiencing problems deploying a Vue JS app built using the Webpack CLi to work.
If uploaded in a root directory everything renders fine, but inside a subfolder, all the links break.
I want deploy VueJS App to this url :
https://event.domain.net/webinar
I have added publicPath in vue.config.js :
var path = require(‘path’)
module.exports = {
publicPath: ‘./’
}
But only the css and js folders point to the path /webinar.
For assets, fonts and others still point to the subdomain https://event.domain.net.
CSS and JS point to path /webinar
Asset, fonts still point to subdomain https://event.domain.net/
Console
use value of publicPath as /webinar that should work.
More details are here https://cli.vuejs.org/config/#publicpath
you can configure publicPath even based on environment.
Sagar Rabadiya pointed you to the right link:
create a file called vue.config.js in the project root (where your package.json is located).
prompt the following code snippet inside:
module.exports = {
publicPath: process.env.NODE_ENV === 'production'? '/your-sub-directory/' : '/'
}
and save the file.
Open a terminal and navigate to your project, then run npm run build to generate a production build from it.
As soon as the production build has been generated, copy the contents from it and paste it in the sub-directory you created in the root folder. For example, if you use Apache, the default root directory is the htdocs folder. I've also created a virtual host on the server, maybe you also need to do this.
Open the browser and type the address where your sub-directory lives. For example: http://your-server-url:your-port/your-sub-directory/ Your should see your app now.
I have an Angular Universal app that I am deploying to Azure App Service (Windows).
When the app runs locally on my Windows 10 PC it works fine but in the cloud it seems like the process.cwd() is different than when I run it locally. This is causing Express.js to look in the wrong place for some view files.
The process pwc should be based on how I executed node, in my case I have a start script in my package.json that executes "node dist/server.js". But I can remove this script and Azure will still start my app. So I think the root of my pwc problem is in how Azure starts up my node app.
Unfortunately Microsoft thinks that some code snippets and a couple John Papa videos is good enough documentation for developers to resolve issues.
Questions
Does documentation exist that explains any configuration or
conventions that the App Service uses to init my node app? Where is
it?
Given the script "start": "node dist/server.js" why would process.cwd() be different on my local host versus Azure App Service? The file structure is the same in both places.
const DIST_FOLDER = join(process.cwd(), 'dist');
app.set('views', join(DIST_FOLDER, 'browser'));
Error: Failed to lookup view "index" in views directory "D:\home\site\wwwroot\dist\dist\browser"
root
package.json
dist
server.js
browser (client app)
server (server app)
Documentation: Not an exhaustive guide, but this is what I found useful on MSDN forums:
Windows Azure Websites uses IISNode to host the Node process inside of IIS. Your Node site is actually given a Named Pipe which receives the incoming requests, not a TCP port like you would use when running locally or hosting yourself.
...
As a node.js application running on Azure Web Apps, needs a server.js or app.js file as the entrance in the root directory with a web.config file to control the iis
Working Directory: When web.config and iisnode are used to run server.js, the rules rewrite the directory to point to where server.js resides. That is why it isn't able to find a subfolder 'dist'.
I had to change the line above to this, in order for it to work on Azure:
const DIST_FOLDER = process.cwd();
Another thing I found important was to set the right version of node for your App Service, using WEBSITE_NODE_DEFAULT_VERSION in App Settings. Here's a bit more info on that from a blog on MDSN - NodeJs and NPM versions on Azure App Services
Since I am used to hosting Node apps on Linux this totally slipped my mind. The answer is...
see web.config
If anyone else finds themselves here put this in your server.ts file to work both locally and on azure
import * as fs from 'fs';
const distFolderExists = fs.existsSync(join(process.cwd(), 'dist'));
const DIST_FOLDER = distFolderExists ? join(process.cwd(), 'dist') : process.cwd();
big thanks to KayS for their answer - really helpful.
I am starting a new project which is using Angular 4 for frontend designing and the application will need some rest api's for which I have decided to use node. I am using angular cli for creating angular app and I know how to create angular app and node server but I want to know how will I connect these two things such that when I do ng serve both the server and angular app gets compiled and run. What basic changes in the project structure or some file is needed to be done?
I'm currently building a full-stack Angular app with a Node/Express backend and was wondering the exact same thing. However, despite what that scotch.io tutorial tells you, creating both the Express server and the Angular app in the same directory is NOT the best way to go about it.
What you want to do is set up your Express server in one project and serve it in one terminal window, then serve your Angular app in a separate terminal window but have it point to your locally-running Express server instead of the default dev server that's included with the Angular CLI (the ng-serve command).
Here's a Stack Overflow answer and also a Medium article that answered all of my questions for how to set this up (fortunately, it's not too hard).
Here's what I did Shubham. I went into the Angular-Cli and changed "outDir": to "../public"in other words it will look like "outDir": "../public". The ../public folder is my Express static folder set in my app.js file with app.use(express.static(path.join(__dirname, 'public')));
Keeping in mind I have nodemon installed globally, and in my package.json file, "start": "node app" I simply run nodemon from this dir to start my server and both Angular and Express run on the same server.
I have seen some people say it's not good to run static filed on the Node/Express server, but for development I'm not sure it matters. Although I'm a novice when it comes to js frameworks etc. Here's the project files on my github acct: https://github.com/chriskavanagh/angularauth.
Edit: You must run ng-build (in your Angular dir) whenever you change code.
First, in Angular project do ng build, it will create dist folder (static folder).
Second step, paste the following code in backend servers entry point file.
app.use(express.static(path.join(__dirname, 'dist/')));
app.get('*', (req, res) =>{
res.sendFile(path.join(__dirname, 'dist/index.html'));
});
And after the above thing is done run backend server: node filename
Note: in give proper path where your index.html file is located in dist folder.
The node server and the Angular app are two different things.
In order to run the node server you should use the command:
node ServerName.js
In order to run the angular app you should use the command:
npm start OR ng serve
In your case, the connection between the two is made by http requests.
For example you could use 'express' in order to implement rest services in your node server and then send an http request to the server in the current route.