Building application with PWA - javascript

I have problem with situaton:
when I use the command ng serve --prod to Service Worker is registered
when I use the command ng build --prod to Service Worker is NOT registered. Missing files in dist
files ngsw

Angular ng serve does not work with service worker.
You need to do a prod build and then serve the application from the /dist folder. You can use any web server you prefer: npm http-server or the web server as Chrome Extension. This way you can test the service worker locally.
You can have a look at this article, where I explain step by step how to create a PWA with Angular.
The article also refers to a Github Project with a running Angular PWA app, that you can use as starting point or to compare it with your code.

Related

npm run build cannot access in localhost

I want to test my react/ node.js web app with a production build. I already run npm run build at the app directory and created build folder.
I was unable to run the application using localhost:8080 (server port).
Are there any ways to double check if the application is actually running in that port or access production-ready application?
PS. I used serve to host the application but it posts error 404: The requested path could not be found
Thank you for your help.
Every SPA application has its own package.json file. Inside you have to see the script section:
Normally after you run nm run build you have a compiled version of your code.
At this point, you have a see the dist folder.
After this, you can either run npm run start and you have to see
(this option is not suitable for SSR frameworks like NUXT or NEXT)
or if you don't have that option install an npm package that renders your compiled code by doing the following:
npm install -g serve
serve -s build
and you have to see

How to change webpack-dev-server with other server like express or apache

I have used vue-cli to scaffolding an vue app and now I want to setup a different web server rather then webpack-dev-server because I want a separate configuration file where I can configure the server like node express which I can use for production deployment.
Please suggest is there any way to configure the new server. Thanks
For development you should continue using webpack dev server (which is express).
For deployment you can use anything you want, just run:
npm run build
This will generate bundled javascript files, which you can then deploy anywhere.

How to run AngularJS app created using yeoman

I'm new to AngularJS. I created a sample app using yeoman for AngularJS. The source is hosted on github here https://github.com/Omnipresent/demoangularapp
I'm not sure how to run the app?
How can I run the app so that it runs on my localhost server and I can play around with it?
Depending on which task runner you are using: Run CLI command gulp serve, grunt serve or npm run serve if you have the node package serve installed to start a local webserver. In your case it should be gulp serve while you using gulp this time. Run this CLI commands in your project root directoy or create a host/vhost witch points to your yo generated app directory where your index.htmlhas been created.
This commands will start an local webserver.
For mor information checkout the yo documentation.
It doesn't matter if application is generated with yeoman, it's just a scaffolding tool. You should run bash with commands: npm install, gulp serve. also make sure that you have gulp installed both globally and locally.

Angular2: How to go from an "ng serve" hosting to a Node.Js hosting

I've made my first Angular2 application, while using ng servefor hosting. Now I've to add some backend(because I need some small server logic).
I've found this who basically explain me how to host an angular 2 app on nodeJs. But ng serve was doing a lot of things, checking the changes, bundling the differents JS/CSS files, injecting angular into my template, getting my dependencies.
I cannot just "generate" angular web site and then, since I've to update the angular part to get the data from the web api and work with it.
So what should I do to switch from ng serve to an nodeJS?
EDIT:
Viewing the answer, I must not have been clear enough.
My angular JS is not an application that will on client ONLY, I've done some part of it(navigation, some form, ...) but now I need to host a server with web service and websocket to continue the work. It's not about deploying this to a productive server. It's about to moving to an environnement that allow me to work on the server and the client side.
I think I finally understood your question:
Instead of using the devserver bundled with angular-cli (ng serve), you want to use your own Node.js-powered server.
Also, you DON'T WANT TO STATICALLY BUILD your app (ng build). You want to serve the live build (which has to be generated automatically by the server).
Here's how you can do it:
1) Watch, transpile, bundle...
Webpack is perfect for that.
Create a webpack config file with the right settings for an Angular app. Here's an example from angular2-webpack-starter: webpack.dev.js.
The example is bit verbose. Just keep in mind the config file is where you tell webpack how to handle .ts files, what bundle(s) it should generate, etc.
2) Serve the bundle(s) generated by webpack with a Node.js server
I see two options, depending on how much control you want:
2a. Use webpack-dev-server (not a lot of control)
webpack-dev-server --config config/webpack.dev.js --watch src/
You can see that the webpack-dev-server uses the config file previously mentioned.
Again, you can see an example of the full command to run in angular2-webpack-starter's package.json file.
2b. Create your own server (a lot of control)
You could create a Node.js/Express server using the webpack-dev-middleware, to which you would feed the config file created in step #1.
The middleware is the magic link that will let you serve the files emitted from webpack over the Express server.
Example of a Node.js/Express server which uses the webpack-dev-middleware: srcServer.js.
Does that answer your question?
I know this is an old question but I am just having this same concern and I found ngserve proxy option useful. In development you can run node on another port then calls to /api get redirected through to node.js.
https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md
package.json gets:
"start": "ng serve --proxy-config proxy.conf.json",
then make a proxy.conf.json file like this
{
"/api": {
"target": "http://localhost:3000",
"secure": false,
"pathRewrite": {
"^/api": ""
}
}
}
run ng build --prod to build your application.
After building the application, you will find your final dist code in dist directory.
Now, use this code in your server.js file in Node.js.
(function() {
const express = require("express");
const app = express();
app.use(express.static(__dirname + "/dist"));
app.listen(80);
console.log("port" + 80);
})();
I'm not sure if this is still relevant, but this might help others get a quick start:
Run your NodeJS server part e.g. like this
nodemon server.js
Open 2nd terminal (in VSCode Ctrl+Shift`) and start client part build & watch
ng build --watch
They will continue to work in parallel, each doing it's own job. This is not exactly the same as ng serve, e.g. this will not reflect your changes immediately inside the page, you still have to hit F5 (which you most probably did anyway before Angular). But this is fast, free and much easier than becoming web-pack guru. And you are still able to switch between terminals to check for any output / errors.
Angular app is a HTML 5 app. So you just need to serve it as a static file in NoeJs.
How
Build your app
ng build --prod
This command will create a folder named dist. The folder content is your HTML app.
Serving your app
Just serve it with your NodeJs app pointing to the index.html file.
ng serve is only for development. It is not intended as a production web server.
ng build --prod --aot --no-sourcemap will bundle your application ready for production and place it in your dist/ directory.
If you want to use Node.js you can use Express with the static file middleware. You will probably also want a RewriteRule middleware to support serverside HTML5 Pushstate.
In reality you don't need NodeJS to serve your built site as it will just be flat files. Nginx, Apache or IIS with rewrite rules to support HTML5 Pushstate will be enough.

NODE Js, local host, error "throw err"

I am using IBM Bluemix to make a web service for a school project.
I am having trouble running my app in the local host.
Throw err
Error: Cannot find module 'body-parser'
I can't figure out what is wrong.
Here is a print of the error screen I get when running it.
From what you are saying I assume that your application is running fine on Bluemix. Use the CLI of your machine to navigate into the application folder (where the package.json is placed) and run
npm install
it will download all the dependencies listed in the package.json in the node_modules folder inside your application root folder.
Doing this your application will have all the libraries it needs to run.

Categories