Run angularjs front-end web app on codenvy - angularjs

How do I run an angularjs front-end web app on codenvy? The app uses angular-route.js for routing between pages. I have tried using the preview function, but that one seems to not work due to the routing...

One way is to use a workspace which has a web server like apache httpd installed. For how to do that see How do you install an apache server (httpd) on codenvy?

Another thing to try is to unbound the app from localhost, i.e. use host as 0.0.0.0

Related

React router direct links not working on Azure Web App Linux

I've developed an PoC about PWA (Progressive Web Apps) using ReactJs to show how to use camera, geolocation, microphone, light sensors and etc from Browser API.
I've created a route for each feature in this web app and everything works fine in localhost. But when I deploy the npm build version of my react app on Azure Wep App Linux service it don't work properly. I can access the main page (index.html) and from there I can navigate to any other page, but when I try access any route direct form its url I receive an 404 error. Except from index page all urls don't work when refreshing or writing manually.
Ex:
https://pwa.mypoc.dev/ -- Works fine
https://pwa.mypoc.dev/lights -- Do Not Work
I'v used this command on azure "Settings" > "General settings" > "Startup Command":
pm2 serve /home/site/wwwroot/build --no-daemon
I've found a question related to it but the answer did not help me, as I'm not using web.config because it is a Linux machine running Node 10 LTS: React App not starting in azure app service
After a little more research I found the problem. As Linux Azure Web Apps uses pm2 to serve a node app I found the answer looking into the official documentation.
PM2 is a daemon process manager that will help you manage and keep your application online. Getting started with PM2 is straightforward, it is offered as a simple and intuitive CLI, installable via NPM.
https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/#serving-spa-redirect-all-to-indexhtml
Just need to add the --spa option into the Startup Command on Azure Web Apps Linux General Settings:
pm2 serve /home/site/wwwroot/build --no-daemon --spa
Using --spa option pm2 will automatically redirect all queries to the index.html and then react router will do its magic.

Developping an angularJS app using a tomcat server

Hi stackoverflow community,
I'm on a project that imposes developping a web app with these technologies:
AngularJs app calling the back-end (the back-end API already existing)
this app will be hosted on Tomcat, with maven as a build tool.
Now I installed eclipse, configured maven and tomcat on it, and i want to start with my first html page. The problem is that I can't find how to deploy an html page (as a start) with these technologies without using a servlet.
I want to generate a war file using maven that would be deployed in tomcat server without defining servlets in web.xml.
All i can find on the internet is how to manually deploy angularJs apps on tomcat.
I found this github project that might be very useful, I'll try to follow the same project structure.

Rest service doesn't work in apk file : ionic

In my ionic application rest service doesn't work when i create apk file using below code
adb install -r platforms/android/build/output/apk/android-debug.apk
If i run application in browser:
ionic serve
then its work file
If I run application in mobile using below code
ionic run -l
then its work fine..
But once i create apk file and install in mobile then service does't work..
how can solve this problem??
please help
The most probable reason is that you don't have cordova-whitelist plugin. The newer version of cordova/ ionic requires for you to use this plugin
Steps:
Install the plugin
cordova plugin add cordova-plugin-whitelist
Update your config.xml to whitelist the allowed urls:
<allow-navigation href="*" />
Refer https://github.com/apache/cordova-plugin-whitelist for details
The rest web service is hosted locally on a development server or PC and running on a address like e.g. http://localhost:8888. Once compiling to an APK it will also be expecting the service address which obviously is not on the device itself.
Therefore you need to host the REST service locally on a development server or PC using a WIFI enabled network exposing the PC's IIS or Apache (which ever one you are using) or you can use cloud hosting and reference the newly created API address in the app's source before compiling the APK.
This ARTICLE provides a good explanation between the difference of ionic serve and run variances

Deploy local angularjs application to webserver

Hi all i have completed my webapplication using angularjs, In local iam using tomact server in eclipse and it is working fine, Now i want to deploy my application to webserver what is the process to do it.
For ex : my local url is : http://localhost:8080/Hms/#/
i want to the url as http://www.hms.com
Please help me i am new in angularjs
If your angular web application depends on Tomcat server;
If you haven't own server for web hosting which has http ://www.hms.com, your hosting provider should provide Tomcat feature.
If you have own server for web hosting which has http ://www.hms.com, just copy paste your all files in your project folder e.g. $TOMCAT_PATH/webapps/your-project-root/. And redirect http ://www.hms.com to Tomcat port (default is 8080)
If you are using only AngularJs, it shouldn't depend on Tomcat. You can use angular boilerplate https://github.com/adilkaraoz/ngbp. Github link provides information in details. With ngbp, just copy build folder inside into the your web hosting and at the and you have http //www.hms.com url which include your web files.
You can deploy this project same as how you are deploying other web applications in tomcat. Hope you build a war file and deploy them.
Angularjs is a javascript framework as Jquery. For server it's javascript, which will be served back to the client as other js files.
Please refer how deployments are done tomcat. Just fyr, https://tomcat.apache.org/tomcat-7.0-doc/deployer-howto.html
Thanks.

Docker and Angular app: one or two containers?

I have difficulties to understand the whole proces of an Angular-app in Docker.
So anguler needs a webserver to run (like nginx) but also needs nodejs to access the backend?
Do you have divide this in 2 containers or how do you have to perform this?
I have now 1 container which had as base image nodejs. There I performed the npm install, bower install and gulp build etc. Now I'm able to visit the localhost:8888/api to see that part of nodejs but I'm unable to visit my angular app. Probably because it's not hosted by a webserver?
NGINX is a front-end server, which doesn't do back-end stuff. This means, that you can separate your application across 2 environments (containers):
Node.js server with it's backend,
NGINX with Angular sites.
NGINX will route requests to node server and that's the whole communication.
From there, you can pull these separate container on your productions servers. You can also configure it in the same container and they should work fine together.
If you installed everything, then it should be a matter of proper configuration.
You can check out this post as a reference on how to set everything up:
Node.js + Nginx - What now?

Resources