I'm working collaboratively on Google App Engine project. Other contributors have committed a basic App Engine project structure:
└───src
├───main
├───java
│ └───com
│ └───[...]
└───webapp
├───css
├───fonts
├───img
├───js
├───partials
└───WEB-INF`
The java directory contains the server-side app written in Java.
The webapp directory contains predominantly client-side code including a basic AngularJS app. However it's also home to WEB-INF which configures the webapp and is not client-side app code.
If I wanted to start using Yeoman to manage the client-side app and get all the benefits that Grunt and Bower bring, how would I do this? I've only ever scaffolded out Yeoman apps from the beginning and never from a predefined Google App Engine project.
I can think of two options:
Remove everything under webapp (excluding WEB-INF) and run
Yeoman from within the webapp folder. This feels a little
ungraceful.
Separate out the App Engine project from the client-side
Angular app and scaffold out an Angular app using Yeoman.
To be clear, I'm looking for information on the means of introducing Angular using Yeoman, rather than just end product of Angular existing in an App Engine app.
I found this specific example of an App Engine and AngularJS example.
Perhaps this might be a decent starting point for you to work with.
Related
I have a personal website/portfolio built with ReactJS and React-Router. I want to be able to serve separately developed and built ReactJS apps as my coding demos from within my personal website (rather than provide an external link). I have used Create-React-App to bootstrap the original website app.
I have tried placing the built files (index.html and *.js files) in the public folder, which is copied to the /build folder when the app is built. However, these files are not being served.
Interestingly it was working with the React development server, but stopped working after building and serving with the npm 'serve' module.
eg. I have copied the built demo app to
/public/demo-builds/[app-name]/
and this gets copied when building the main website app as
/build/demo-builds/[app-name]/
Accessing my-domain-name.com/demo-builds/[app-name] or my-domain-name.com/demo-builds/[app-name]/index.html results in error.
Is this an issue with my overall methodology of trying to serve separate built apps within a react-router app?
Is there an accepted way to serve built React apps within a React app?
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.
I have started to learn React and now I am a bit confused about different parts of development and deployment.
Does all webpages are bild with frameworks like React or Anguler? Or they are used only for one page web applications? Can I serve React with nodejs server?
Does the method when you build static webpage with js, html, css and serving them with Apache web server is still used in modern world?
I would highly suggest using the React-Create-App utility. And yes, you can use Node.js. In fact, React doesn't force you to use any backend framework. I could pick ASP.NET MVC, Node, Spring MVC, Rails, etc.
https://github.com/facebook/create-react-app
But this tutorial will guide you through creating react apps in development and creating production builds.
When you build in production, you'll end up with a public folder with html files. But in React, you don't create html files, you create .jsx, which is a combination of html-like React tags with JavaScript. They will get transpiled to html, etc during the production build phase. You can then take the build folder and deploy it on an HTTP server, such as Apache.
I have a gulp angular project with the following structure. To serve it as a web app, I use the command gulp serve. Gulp then does some magic that rearranges all the files in the .tmp directory. I would like to take the web app and convert it to an ionic app. I attempted to follow the steps here (How to convert an existing Angular1 web app to a Cordova app?), but it seems that due to gulp I have a few additional steps.
To attempt this on my own, I:
Setup an empty ionic project,
Copied the contents of my src folder to the ionic apps www folder, and
Ran ionic serve.
The gulp setup was done by a coworker, so the inner workings of it are something of an enigma.
You cannot do it that easily. Ionic works with it's specific angular directives, like ion-nav-views, ion-views, ion-content, etc. you need to wrap all your states/views inside this directives and transform your navigation system into tabs or side menu (mobile app navigation systems) to make it work. There's a lot of workaround to do!
We have written an angularjs web site/app - optimised for mobile
and are using cordova to make an html5 based mobile app.
The code (html, css, js) will be the same for both the web app and cordova app
but there will be some files that will be different.
How do we set up our git repo to share (only) common files between the web-app repos and the cordova-app repos ?
Obviously any .gitignore files are tracked and are common to all repos. We could add all files we don't want in the cordova repo to .gitignore but that will reduce the usability of 3+ web app repos for the one cordova repo.
We've tried:
Having a local repo of the project for the cordova app with .git/info/excludes on that repo instead of .gitignore files - but this only solves the problem for pushes from that repo, not pulls from the origin (which will cause errors with untracked files)
Setting up a different branch - and use a git flow style approach for intermediate branch for merges - but it's (apparently) not possible to have an .git/info/excludes specific to a branch - so everything will get overwritten on each merge
I would need more informations about the project because it could depend of a variety of factors: goals, time, budget, etc... But in my opinion there are much more differences than only "some files" between a web and mobile projects.
For example:
a mobile hybrid app need some plugins to do some specific mobile tasks and behave as a mobile app
a well optimized web app could be too heavy for a mobile app
web app need support also IE but a mobile app not
a good responsive web app interface is not a mobile interface and vice versa
For this I would create three separate repositories: an AngularJS Web project and an Ionic Mobile project. And the third repo with an AngularJS module that will be imported as a git submodule. This third module could be as a Core module with all functionalities (services, directives, filters and so on) that will be shared between the two applications.