I've just used Yeoman to create an Angular project that looks great when I run grunt serve. But then I decided to view it by running http-server, and the page gets displayed without the formatting and without the images. Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?
I discovered that I had to run grunt to build the project which fixes the references and places a distribution uglified version of the project in a dist folder. This ran just fine on my other server.
"Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?"
Yes, you will run into this problem on your web hosting server.
grunt-serve serves the app used the setup on your local machine.
http-server mimics how a real web hosting server would evaluate your references.
My development routine is to use grunt-serve until I have a working version and then use http-server to test it out and see if it would work before I push it to my web hosting server. As #cdavid mentioned, running grunt build from your dist directory should be sufficient for general dependency issues.
Related
First of all, my question is not about how to install angular. I'm just getting started with this framework and already got a question right at the beginning.
Usually I create new web projects (HTML, PHP...) in the default web folder of the apache webserver (/var/www/). I did this with angular too under /var/www/firstAngularProject, but it seems the application itself is only accessible on its default port on the webserver root. In my case this is localhost:4200
When I try to open the path in my browser localhost/firstAngularProject I see the index structure and I think this could become a security issue.
So my question is where should I install the angular project or what is the usual way to install it?
When you run Angular using the cli command ng start (which I assume, based on you describing using localhost:4200) you're running the application using webpack-dev-server. This is undesirable since it's only meant for use during development, not for production.
In production Angular works just like any other frontend framework. You build the application with ng build --prod which produces a number of build artifact (in the /dist folder). These artifact are simply static files you make available through some webserver, in your case Apache, by copying the content of the /dist folder to /var/www (or whichever is your default web folder) and that's about it.
Does somebody know how to set up propertly websites based on angular (auto generated with yeoman) on ubuntu server?
Here is the thing, I have a project developed in angular, I generated it with yeoman (the basic example, on yeoman codelab). I can run it and see it working on my computer with "grunt serve", but I have no idea how to upload it to my server for access it from the internet.
On my ubuntu, I have installed apache2, MySQL, PHPMyAdmin, and Node (i guess I do not need apache2 for all this, but I have it anyway).
I connect with putty and the command node works fine, npm works fine too.
I am searching info, but I only found how to run a service on the node (example:node test.js) but this is not the case.
But what I want to do is to upload a website (angular) for access it from the internet...
I uploaded the "app" folder (that has the index.html, styles, controllers, views, etc) of my angular website (generated with yeoman), i uploaded it on my www directory in ubuntu, but when I access angular, or styles doesn´t work.
So, the question is: Does NODE have a "www" directory (like in apache2) where I have to upload my websites (angular websites) for access it from the internet? or I have to run it with some kind of "grunt" or "node" command?
Because i can´t run it with "node index.html", and if i access it from the internet it doesn´t work either, so... what am I doing wrong?
If you have a runnable app on local then follow these steps:
Set it up on git and host on github, bitbucket or any other git hosting and connect your server via ssh and choose/make whatever directory. (Doesnt matter which direcory, I personally prefer /var/www )
Pull that repo in that directory.
Run the app using forever or some process management tool like pm2
PS: grunt is more of a developer tool than production tool. so start your app directly using node wahtever_your_server_file_is.js in forever
Also make sure whatever port you are using to run the app is open on your server.
I have built a basic angular 2 app. However I need to deploy it on Jboss or Tomcat as I need to use it along with my Java EE application.
Thanks for your help.
You would use a bundler such as angular-cli or webpack to create the production bundle which is then served by the HTTP server. The bundler creates all required file that go into the htdocs directory. Normally Angular apps are completely decoupled from your backend server so there shouldn't be any JBoss or Tomcat specifics.
The Angular team are going to increasingly focus on angular-cli as the premier bundling solution so it might be a good idea to start there.
If you are using angular-cli you can use ng build command. It creates all static files for deploy Angular2 app into the dist folder. You must copy and paste them in webresources folder of your Web Application (WAR). At the moment I am looking for how to deploy this files easier.
I have a basic Angular app installed using a Yeoman fullstack installer, and I can see the basic pages running on http://localhost:9000 when I run 'grunt serve'.
I also have a Vagrant installation running using the ubuntu/trusty64 box. I was originally seeing a 404 when trying to view http://127.0.0.1:4567/, but following some instructions I found online, I edited the file in 'vagrant ssh' at /etc/apache2/sites-enabled/000-default.conf by removing the html part of the path in that file. After doing 'vagrant reload' I now see the list of files in my project dir when I go to that URL.
How do I go about viewing my angular app like it is at localhost:9000? If I get this working will this mean that if I share via Vagrant, they'll see the angular app running as it should? Do I still need to be running grunt serve in combination with Vagrant?
I'm pretty new to all this setup, so I'm just following the instructions at https://github.com/DaftMonk/generator-angular-fullstack & https://docs.vagrantup.com/v2/getting-started/index.html
I'm not great with Linux/cmd line stuff as yet, hence my problems... :)
Thanks!
I started writing instructions for you on how to get it done. But then realised that you are not very comfortable with linux commands. I have created a angular-seed project that uses vagrant, angular and requirejs. Its easy to set up and I have written instructions on how to do that in my github page.
Just clone it, follow the instruction and you will have a working seed project in no time. Some of the features of the seed are:
Uses vagrant and puppet to provision the vm. All required dependencies are automatically installed.
Grunt tasks for:
autoloading bower dependencies
compile sass or scss
livereload
server for access of site locally
If you have any difficulties or questions, feel free to contact me.
I have recently discovered Yeoman and it's great for the iterative process of building web apps. I am using the Angular-fullstack generator and when testing it works perfectly so far.
My question relates to how the "site" is build when executing "grunt build". This creates what I assume is intended to be a deployable version of the web app for a node express server.
The folder structure is as shown, the entry "html" file is in \dist\views. I would have expected in to be in the root folder.
Is it possible to build the webapp so it can be deployed on a more traditional server (i.e. Apache or IIS)?
I'm not sure exactly what you mean by "deploy on a more traditional server." You can get Node.js running on apache by looking here.
But do you mean on a server that just serves html and javascript, with no back end code? In that case use the Angular Generator. It creates a front-end only web app; just run grunt build and drop the contents of the dist folder straight where you want it served from.