I have a NodeJS application and an Angular 6 as a frontend.
The project looks like:
-> Node Project
---> src
---> Client_App (Anuglar)
To run the application, I need to follow those commands and start the server and angular separately, like:
-> node start
-> cd src/Client_App
-> ng serve
I need to start the two application with one single command or to add my dist file of Angular to be run at the start of my NodeJS, which is using Jade right now.
I am still new to NodeJS and still don't know how to configure it.
Anybody can help? Thanks
Edited:
I have tried now to add the dist folder to my views folder and run it within the app.js
app.get('/', function (req, res, next) {
res.sendFile(path.join(__dirname + '/app_server/views/ngapp/index.html'));
});
But I am receiving the error, that my .js and .css folders are not found:
When you build your application with the CLI ng build --prod, you get a dist folder : this folder contains all of your application, bundled into different files (feel free to look at them).
To be able to create a .ZIP file with that, you will need two things :
this dist folder
an http server
You have the first one, but not the second one.
All you need is a very simple server. For instance, http-server on NPM can do that. By installing it as a dev dependency, you could create a command in your package.json file
"deploy-locally": "http-server ./dist"
And now run it with
npm run deploy-locally
Or even better,
"start": "http-server ./dist"
And run with
npm start
If you don't want to use a NPM package (or forced to use NodeJS), simply create a basic http server in a JS file and run it with your command line (sorry, can't help on that, not into nodeJS right now).
You can create a new route and pass in app.route as express.static as below,
var express = require('express');
var path = require('path');
var bodyParser = require('body-parser');
var app = express();
app.use(express.static(path.join(__dirname, 'dist')));
make sure, u have build version of angular application by running this command,
ng build --prod --build-optimizer
You would need express to install in this case. express has amazing ways to handle all this
Related
I have an Angular 6 application and an existing nodejs api application.
So far I have used
ng serve
to run and build the angular application.
I now want to serve my angular application from the existing node js server.
How do I do that ? I can't find any documentation.
Steps:
Do ng build, It will create a dist folder which you can easily serve from node webserver framework like express, Hapi or Koa
if you are using express.js you can server angular app.use(express.static(path.join(__dirname, 'dist')));
Now use node server URL to serve angular like http://localhost:nodeport
If you are using Hapi: check this out https://hapi.dev/tutorials/servingfiles/?lang=en_US
================================basic express server================
const express = require('express');
const app = express();
const path = require("path");
const fs = require("fs");
//const bodyParser = require('body-parser');
app.use(express.static(path.join(__dirname, 'dist')));
//app.use(bodyParser.json());
//app.use('/api/v1/', require('./api/routes'));
app.listen(8080,function(err){
if(!err){
console.log("server is running at port:8080);
}
})
You have two ways of serving an Angular SPA:
Usually dev: the Webpack-run server, which is ng serve. Dynamic in the sense that any modification to a file starts a rebuild and updates the output.
Usually prod: you build all the html/js files (with ng build [...]) for the SPA to be statically served by a node server.
In your case, if you'd like to use an existing node server, it means you'll have to build the files (with ng build) and then hook up the usual node static files serving snippet in your node app.
Beware though: you'll have to do a full build each time you want to update the display. So it's ok if it's not that often, but not ok for a dev environment I guess.
I'm wondering how to deploy vue-express full stack application to local Ubuntu server.
I couldn't find proper info from google. Can someone please explain the process?
If you build your vue project with vue-cli 3 (which I strongly recommend), using its npm run build script will create a /dist folder with all the minified stuff you need.
Then, you just serve this folder with you express app, something like this:
const express = require('express')
const app = express()
app.use(express.static('dist'))
On my local machine I have been developing on a tabler clone. To run it, I do as the repo suggests and run npm run serve. This brings up nice dev tools like auto-compiling scss and livereloading after changes. Further, npm run dist creates a /dist folder with my sites contents. However, I want to run this on an EC2 instance, but am unsure how to run for a production environment. How would I do this?
A direct Tabler clone is live here on my server. As you can see it takes too long to serve up the basic index page. This is the issue I am trying to solve by running in production
My solution was to wrap the code in /dist with a new node/express program. I set up a basic express app under /prod. In app.js I have the following code.
const dist = path.join(__dirname, '/public/');
router.get('/', function(req, res) {
res.sendFile(path.join(dist, '/index.html'));
});
For production, first I call npm run dist
Then I call npm run prod which does the following: "prod": "del ./prod/public && move-cli --mkdirp ./dist/ ./prod/public"
Now the server is runnable using node prod/bin/www
I'm trying to set up a Node.js project that uses Express to provide a few backend APIs and serve a SPA built with Vue.js.
When I use the Vue cli to initialize a project, I get e.g. src/main.ts main file and commands npm run serve to run a dev server and watch for changes and npm run build to build a production release.
When I use the Express application generator to create a project, I get ./app.js main file and npm start to start the server and watch for changes.
How can I combine these into a single project, both served by the same Express server? Preferably so that a single command would watch + update changes to both server and client? I want to use Vue single file components and TypeScript, which (probably?) require a build step.
(I don't need dynamic server-side rendering of Vue templates, just the static SPA app provided. I prefer TypeScript, but JavaScript answers are fine as well.)
These will be different for your dev and prod environments...
For development look into concurrently - it basically allows you to create a single script in your package.json to start both the client and server concurrently and will watch for changes etc...
For production, you would need something like this in your app.js:
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'));
const path = require('path');
app.get('*', (req, res) => {
res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
});
}
(The code above assumes that your directory structure has a client folder with a build folder after having run npm run build I'm more familiar with React than Vue... but the logic should be the same...)
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.