Have an application that has a angular 2 front end and node backend api that provide data for the front end. The node backend is using the npm config module to provide environment settings depending if the application is running on production or stage. I would like to use the same config module within the angular front end.
In node all you do to get the correct config settings is to require config
var config=require('config');
The config files also should in a /config folder of the application root where server.js is being loaded.
What is the best way to somehow require the config module into angular?
I would like to use the same config module in both angular and node environments.
Angular (or perhaps underlying XHR) is fussy about where it will pick up files from.
Can you get the server to serve up the config file as if it were data?
Related
I would like to deploy my angular application with nodejs, mongo, express js on my own server.
My way is:
-> ng build --prod (output is dist folder)
-> ng serve on dist folder
Start backend:
-> node server js file
But I think, it is not correct way od production stage. Added http server on express, there I create another index html view file with hbs, and there I use:
<body>
<my-app>Loading ...</my-app>
<script src="/dist/bundle.js"></script>
</body>
But on dist server, there is multiple js files.
How can I create using ng option (no webpack or must be f.e. webpack?) my angular/mongo/node/express application (in 1, my own server, no aws, heroku, github etc). There is any correct way to do it?
I've been able to deploy an angular app using Caddy Server as the webserver.
Create a build of your Angular code by doing ng build --prod-true.
This creates a set of bundled Js and Html files in the dist
directory.
Copy these files to where you want to run the app.
Next go to the Caddy website and download the version of Caddy for
your os. You can choose all kinds of features but for my deployment
inside a firewall a plain build worked fine.
Drop the caddy file in the directory that you put your compiled
angular code.
Create a caddyfile (just a file named caddyfile), add localhost:(your
favorite port number).
Run caddy and it will automatically serve your app by launching
index.html. You can view your app at localhost:port.
No messy node installation. Caddy has all sorts of add-ons to deal with more complicated scenarios but the deployment is caddy.exe, caddyfile and your built code.
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.
I have two repos:
A Vue client interface;
A NodeJS socket and web server.
I need to serve the built files of the Vue interface with the server and don't know how to proceed...
I have two ideas of how to solve this:
Create a script that would clone the Vue repo, build it and move the
builded files in a folder server by the server.
Declare the Vue repo as a dependency of the server and find a way to
build and access to the dependency files.
The second one seems cleaner but I don't know how to begin approaching this. Could someone please provide some thoughts on the better approach and how I might get started?
You've tagged git so I'm going to say use approach 2 but use git sub-modules. You could create some sort of webpack task to build your Vuejs project within the Vuejs repository. Then you can submodule your vuejs repository to the web server / socket project.
You can then use some sort of gulp or webpack script to call into the vuejs project to instruct it to build. Once that is built you can use the express.static function to serve up the build from your web server on whatever route you want (probably just the / route).
With submodules you can simply bump the submodule when you're ready to do a new release of the frontend and then re-deploy the web server with the new version of the dependency. This is how the Ghost project do their frontend deployments.
Git Submodules documentation - https://git-scm.com/book/en/v2/Git-Tools-Submodules.
Here's how I do it with Express:
const express = require("express"),
path = require("path"),
app = express()
const DIST_DIR = path.normalize(__dirname + "/../../VueOutputDir")
app.use(express.static(DIST_DIR))
This will automatically serve the index.html and the assets from the VueOutputDir directory.
I am using angularjs2 with typescript in the client side and nodejs and express in the back-end, and every time i make changes to my client side files(.ts & .html) while running my node server on port 3000 i don't get the saved changes,so i have to run npm start for the ng-2 lite-server so that it like refreshes to get the changes, I am not sure whether i need a single module loader like SystemJS, which is the one i am using with ng2, or i need another systemjs required in my server so to get changes after saving.
In my server file i have
app.use(express.static(path.join(__dirname, 'client')));
that loads the static files, and which loads the index.html file that has the lines which i learn that they load application modules for ng2
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
Since my server loads the index.html which contains the above code, im expecting nodejs and express to load the updated files accordingly, or is it because nodejs uses commonJS instead of system?
Is this the right way to do it or there is a better integration method for ng2 and nodejs?
What are the efficient options that are there in this aspect?
I'd suggest using pm2 to run your node server. The --watch flag will restart node (non-gracefully but quickly). If your Angular app is inside the node app folder then node will restart given just the flag, if it's outside that then you can pass a specified path to the --watch flag.
pm2 is a Production quality tool for Node, and works great locally too.
Details: http://pm2.keymetrics.io/docs/usage/watch-and-restart/
Example cmd: pm2 start index.js --watch
How do I use Webpack with ReactJS and NodeJS? My problem is both the server and client have source that needs to be transpiled through (babble et. al.) but the Webpack config file only has one output file.
What I need is my node app build and my client side app built and put in build/.
Webpack won't compile your server code. You'll need to configure babel to transpile your server code when the server starts. Why do you need both server and client code in a /build/ directory? It's better to keep them separate.