I cloned universal-starter (webpack version) and have it up and running on my local machine using npm start and npm run watch per the instructions
Now stuck after npm run build and attempting to deploy to Azure (and Google Cloud) via the github integration - can't figure out how to set up either to work.
Anyone have a recipe on how to get the webpack bundled files to fire up on an external host with express.js? Do I need to run commands via a CI integration? The files in /dist don't seem to stand on their own.
At Netlify you can connect your git repo and tell them what build commands you want them to use. If you specify the "dist" directory, then they will deploy anything that gets in there (after they have compiled your application).
Edit: the lowest tier is free.
Edit2: I am not associated with Netlify. I just used them in my latest deploy, and found the process extremely easy.
Note: This has changed dramatically since Angular 2. While I'm now moved on to SSR, docker, and all kinds of other things, the simplest answer was to
1) Production build
ng build --prod
2) Transfer files to a static web host (i.e., I used awscli to connect to a s3 bucket when it was just a static site...I know use SSR so I need to use a node server like express)
3) Serve files (there are some complexities for redirect requirements for index.html for error and for 404...and of course setting the status for both redirects to 200)
4) Put something on the frontend for performance/ ssl/ etc. nginx or a CDN would make sense.
Related
I'm new to vueJs and nuxt and i'm trying to deploy my nuxt app to my server, I tried the command npm run build and I have two files, client and server, I googled what should I do with this files but I got Nothing, So how to deploy my app to cpanel?
If your target is server (default), you indeed need to do npm run build. Then, you have a generated dist that you need to send to the server and then npm run start.
Sometimes, additional configuration is required and can be found in the deployment pages. There is no Cpanel but you maybe can find something that looks like the same here: https://nuxtjs.org/docs/2.x/deployment/deploying-to-21yunbox
basically i am java web developer , now i change one old web application into angular and spring boot microservices. i learn basic angular form youtube tutorials and other sources , but i have big confusion on deployment , when we run command ng build --prod ,it compress all files and create dist folder.
i copy all file from dist folder and paste inside tomcat webapps folder and application run fine ,
now i want to know it is necessary to build whole project every time ? and repeat same process again and again when we make any changes on our local development machine.
i try to find the solution a lot search on google but did not get any solution please suggest me what is the proper way for deployment from local machine to production server
You can use another external front server as node.js instead of embedding the front whitin a tomcat.
with a node.js server maybe you will be able to use the ng serve -o to change files and hot swap these changes easy
Another thing you can do is to set a devops environment, but this is more difficult.
TIA for your help.
I recently started experimenting with Google App Engine, and I have been able to set up a project successfully.
However, I made a mistake with the location of my local files and I would like to change it.
This is the output from my console when I deploy:
jnkrois#dev:~/Development/My_Project$ gcloud app deploy
Initializing App Engine resources...done.
You are about to deploy the following services:
My_Project/default/1234567890 (from [/home/jnkrois/Development/My_Project/app.yaml])
Notice that the local folder is /home/jnkrois/Development/My_Project/app.yaml
I want to change the gcloud settings in order to pull the files from my /var/www/html/My_Project/
That way I can run the project locally via my Apache server.
Thanks for your help.
That way I can run the project locally via my Apache server.
In the vast majority of cases you won't be able to run your GAE project through apache. Except, maybe, for a totally static website with a very particular config.
The proper way to run your GAE project locally is using the development server, see Using the Local Development Server
But to answer your question - there is no extra dependency of the project outside the project directory, so just move the project directory to where you want (up to you to check address any permission issues, assuming all permissions are met in the example below) and run the gcloud cmd from the new project location:
mv /home/jnkrois/Development/My_Project /var/www/html
cd /var/www/html/My_Project/
gcloud app deploy
Again, donno if this will help you run it through apache or not.
I wanted start with the new Angular 2 but I can't grasp how npm is used in the official (and several other) tutorials. For me the node_modules directory is mainly used for development but in index.html the needed script files are mostly included from this location:
<script src="node_modules/systemjs/dist/system.src.js"></script>
When hosting the app on your own machine, there seems to be no problem because everything would be present due to npm install. But if I want to host my app somewhere else (e.g. as a Github Page) I generally don't have node_modules as it would be excluded in .gitignore.
One way would be to load the dependencies via some CDN but is there a better solution?
as you know node_modules are mainly used for development purpose, you dont need them in your repo while hosting your code.
You can follow two approaches here.
Deploy as it is. Just that - no minification, concatenation, name mangling etc.copy all your node_modules,Transpile all your ts project, copy all your resulting js/css/... to the hosting server and you can host your app.
second approach will be the recommended one.Deploy using special bundling tools. Like webpack or systemjs builder.basically these builder will make a bundle of your application, and you can just deploy that bundle on the server.
For more reference, I have provided links of sample apps:
Webpack Starter
SystemJS builder
Hoe this helps.
I have developed an Angular 2 application using npm, As a fresher,I don't know some ways like below.
When I publish I used npm publish so that it publish the application in npm account in the web.
So here, is there any way to publish our app in the localhost,because I don't want to use npm account and I just need to avoid node_modules folder on publishing ?
If any other way,that can be used to publish the Angular2 Application in local other than npm, let me know.I try that.
If it is not possible to publish the application without npm web account, Kindly let me know please .
Excuse mistakes,If any.Thanks in adv :)
npm publish is to make a library package available to other for free use.
That's not what you use for making a web application available. This is called deployment.
For deployment you usually execute a build step that transpiles TS to JS, and combines them into a single file to reduce the number of requests the browser needs to make in order to get all source files of your application. It may also inline component HTML and CSS. This build step can also minify and mangle to JS code to reduce the resulting file size even more.
The resulting output can just be copied to any directory that any web server is able to serve to a browser either on your local machine or at some machine of a web hosting provider.
There are different ways to build your application depending on your setup.
See for example How to deploy Angular 2 application developed in Typescript to production?
You need browserify, that's all
browsers need references to all js files to be put in the html, they don't understand node's require() method that forms modules dependencies
what browserify does is traversing the entire dependency graph of your project, recursively bundling up all the required modules starting at the given root into a single js file
install it by node package manager
npm install -g browserify
use it to bundle all needed modules staring at main.js
browserify main.js -o bundle.js
now put a single script tag into your html
<script src="bundle.js"></script>
as far as i know, node_modules contains dependencies for typescript transpilers and few others. so it will not be possible to publish an app without using node_modules.
perhaps you can try using Plnkr or jsFiddle
where you can make imports online using cdn links for node_modules and publish your app.
it will be easy compared to other alternatives.
hope this helps.