I'm trying to put an angular application in "production" on a local server that is generated by the http-server tool, but it does not return the of the index.html.
I followed these steps ...
ng build --prod (this throws me the project folder for production like this -> "dist / project-erp")
http-server
web server
Update:
So, I changed the base route to "/" but still happening in same situation :/
After many tests of building the project, the solution to launch it on the Express server (it worked for now) is to just do the command "ng build" instead of "ng build --prod", then the folders "dist / project-erp "put them on the backend server.
Related
I have two separate applications one is the ionic app and other is node express api app. Is it possible to merge both in one application? Like for example when i enter npm run start it should run ionic serve and node index js both?
Typically after you finish developing your frontend you "build" it. This minifies and optimizes frontend files. For ionic: https://ionicframework.com/docs/cli/commands/build
This creates a folder(the default name can be "dist" or "build" etc). You put this folder in your backend folder, then serve it statically. For static serving check out https://expressjs.com/en/starter/static-files.html.
This way you deploy only backend, and it works. You can make api endpoint routes start with "/api" and "/" routes can be for frontend's static serving.
If you mean you want to do that for development purposes only, you can use concurrently command https://www.npmjs.com/package/concurrently
npm install -g concurrently
After installation, add this line to package.json script
"start": "concurrently \"command1 arg\" \"command2 arg\""
In command1: add ionic start command, like: ionic start
In command2: add node start command, like: nodemon server.js
I have a asp.net core 2.2 react template based app
The react app under ClientApp has my own build script for react app which compiles stuff in a lib folder under ClientApp via 'npm run build' custom script.
More importantly, the app runs with a custom node/express based web server (npm run start in clientapp would launch a web server script which would listen on say port 6000)
I cannot use the standard react development server that comes with template.
The startup.cs file of asp.net core layer uses it via spa.UseProxyToSpaDevelopmentServer (http://localhost:6000)
app.UseSpa (spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment ())
{
string reactDevServerUri = Configuration["ReactDevServerUri"];
spa.UseProxyToSpaDevelopmentServer(reactDevServerUri);
}
});
During debug session in vs 2017, on any change in typescript files in ClientApp\src folder, i need to
1.Invoke script 'build' in ClientApp\package.json to compile react app in ClientApp\lib folder
2. Restart my web server running via script 'start' to pick new changes in lib
3.Reload browser
Currently i have added a 'debug' script which uses nodemon to track changes in react app and restart server after build script
"debug": "nodemon -e ts,tsx --watch src --exec \"npm run build && npm run start\""
I still have to reload browser myself and it keeps failing until build/start are finished. I need a better way to do this in one go by proper configuration of encapsulating asp.net core project.
Please help me figure out a way :)
I have a node app which in development is usin 2 servers one for my node side and another for my react side. I am running this using a line in my package.
"scripts": {
"start": "node app.js",
"server": "nodemon --inspect-brk app.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
when I run npm run devit all works, however when I run node start the server starts running however when you go to the / root url it gives a 404 status error. I assume that's because the app doesn't know where to look for the index.html file or how to kick off the app though I could be completely wrong.
my folder structure is:
As you can see my client folder holds all of the react stuff. the src is the uncompiled react and the build holds my actual index.html fil along with the static folder which holds the compiled react stuff :
so how do I get that to actually work or point me in the direction to look? I guess i've been spoiled with most apps just knowing out of the box how to do this.
UPDATE:
so i have 2 routes currently setup
//initiate route handlers
app.use('/login', require('./routes/authRoutes'));
app.use('/tiles', require('./routes/tileRoutes'));
inside of /login I have for example
router.get('/', (req, res)=>{
some code here...
}
however going to either of those, so if I navigate to localhost:5000/login, I still get a 404 error
If I understand this correctly it works when I run npm run dev because 2 serves spin up. the one server handles all my node code and the second handles all my react code. However I don't want to run 2 servers as my deployment to heroku definitely won't. So how do I merge to 2 so to speak?
Use express.static() function to host static files on your express server. See more here: https://expressjs.com/en/starter/static-files.html
I have an app in Angular 2, decided to add real server, Node JS, to upload documents and do other things.
Browser => Angular [localhost:4200/api/documents] => Node [localhost:3000/documents]
This is how I start them together using scripts in package.json
"scripts": {
"server-start": "gulp",
"client-start": "ng serve --verbose --proxy-config server.conf.json",
"start": "npm-run-all -p client-start server-start"
}
So, when I run npm start it starts 2 parallel processes - Node JS using Gulp and Angular using ng serve. Angular is a front end, but all URLs that start with /api get redirected to Node. Here is how it's done with server.config.js
{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}
Node JS receives stream from Angular with image and saves it in Angular assets folder, so uploaded image should be available in Angular, but when I try to open uploaded image in browser it returns me 404, not found. Just in case, this is part of my .angular-cli.json
"root": "src",
"outDir": "dist",
"assets": [
"assets",
"favicon.ico",
"service-worker.js"
],
"index": "index.html",
"main": "main.ts"
Example, I have existing image that was there before ng serve
F:\Node\cms\src\assets\uploads\1.jpg
available at, it works
http://localhost:4200/assets/uploads/1.jpg
I upload new one to the same location
F:\Node\cms\src\assets\uploads\5.jpg
but it's NOT available at
http://localhost:4200/assets/uploads/5.jpg
When I restart my servers image becomes available. According to this discussion ng serve performs deployment of Angular app in the background, and folder dist is empty, all images are taken from memory, and any new images dropped into assets won't be available, correct me if I am wronng.
Question #1: is built-in Angular server able to handle dynamic images if they were added when application is already running in memory?
Question #2: looks like in complex apps ng serve brings more troubles than benefits, is it worth to try to make it working or you'd recommend to start using ng build instead?
when running your application, everything points to build folder. Not "src"
You probably are wiping out the images each time you run my serve or need to store them in a different location.
You are technically storing images on a "server" so I recommend using node to retrieve the paths to these files.
You should use ng build instead of ng serve. ng serve is meant for dev purposes. See https://github.com/angular/angular-cli/wiki/serve
Additionally after running ng build you will need to have the dist folder on an actual server. Here's an example from the Angular wiki
https://github.com/angular/angular-cli/wiki/stories-disk-serve
ng build --watch
lite-server --baseDir="dist"
You could also have node serving the dist folder using the static method that is built into node.
The line to add would be either
app.use(express.static('dist'))
or
app.use(express.static(path.join(__dirname, 'dist')))
See https://expressjs.com/en/starter/static-files.html
I prefer to do ng build -aot to get the bundle size as small as possible and then serve the dist folder with nginx.
I have a node.js application set up to use typescript.
The application is supposed to be deployed on heroku.
The node.js application is set up as an restful api for things like auth, registration and requests.
I would like to know what dependencies I need to add in order to begin building an angular 4 application in the same project.
I saw an issue on github where the recommendation was to use ng init however that is no longer an option. ng new creates an entirely new project directory rather than adding the dependencies and files.
There is another question on here where the OP marked his own answer as correct which basically says "use meteor".
EDIT:
I understand how to serve an angular 2+ application along side from within a node.js app when working locally, just build and serve the index.ts file. But how can I have the angular development files coexist with node.js files in git so I can compile them and deploy them together?
I had the same case, I had a parse server on heroku and wanted to group it with Angular.
In my server.js file :
app.use(express.static(__dirname + '/dist'));
(You just need express)
I also use internationalization, so I made something quick (early stage, please don't judge) :
app.get('/', function(req, res) {
let userLanguage = req.headers["accept-language"];
let langs = ['fr', 'en'];
let preferred = userLanguage.substr(0, 2).toLowerCase();
console.log('User\'s preferred language is ' + preferred.toUpperCase());
if (langs.indexOf(preferred) >= 0) { res.redirect(preferred); } else { res.redirect('/en'); }
});
My NG commands :
"postinstall": "npm run build-i18n",
"i18n": "ng xi18n --output-path src/i18n --out-file messages.xlf",
"build-i18n:fr": "ng build --output-path=dist/fr --aot --prod --bh /fr/ --i18n-file=src/i18n/messages.fr.xlf --i18n-format=xlf --locale=fr",
"build-i18n:en": "ng build --output-path=dist/en --aot --prod --bh /en/ --i18n-file=src/i18n/messages.en.xlf --i18n-format=xlf --locale=en",
"build-i18n": "npm run build-i18n:en && npm run build-i18n:fr"
My apps is built in 2 folders for the actual 2 languages, and the user is redirected to either of them when he comes to the app.