I have a fully developed Angularjs frontend app (with the routes and everything set up) and would like to change the current backend to a Play 2 Java. What is the best approach to display the existing html files from Angular in Play? I have found a few examples of how to connect the routes, but I would rater not create an index.scala.html file as I would like to have the two frameworks separated as much as possible and having Play only working as backend.
If you don't want to dynamically generate views from Play using Twirl and you just want to serve your HTML static files publishing them as assets is the way to go. By default assets are designed to provide resource like CSS or JS files but nothing prevents you from serving ordinary HTML views as well.
Simply put your index.html in the public directory and modify the conf/routes files so it can handle all requests:
GET /*file controllers.Assets.at(path="/public", file)
This way your index.html will be accessible at www.yourdomain.com/index.html. Remember to put this line as the last mapping in the file as it matches all possible URLs. Other services should be declared above it.
Related
I am making a Single-Page React App [website]. Therefore, most of the links are on the same page, with ID #s, and that works fine for now.
The WIP present version of this particular app in question can be found here, for reference:
https://iworks.netlify.app/
In the Footer component, I have made a 'Legal' links' UL with Copyright, Privacy Policy and TOS, as standard HTML Files. These three basic HTML Files are placed in a sub-folder in the SRC folder itself, in production. This sub-folder is named 'html', and the links are set to open in a new tab.
The question is, how do I make React to recognise and build this sub-folder in the app, and to open these links relatively?
[Since these pages are not 'built' into the app, they certainly do not get included in the Build either. Now, one simple solution is definitely to just put them manually into the build, later on; but I also want to learn the fool-proof method to do this correctly. Hence this enquiry.]
Most of the discussions relating to React Routing on the web seem to either specify multi-page apps, setting components to open separately; or to place the entire react app in a sub-folder. However, I just want to manage these three links (i.e. HTML pages in 'html' sub-folder) as independent entities (for now).
What would be the most efficient manner to achieve this?
Duplicate of Is there a way to link non-react html files in a react app?
Just place your html files inside the public folder of you create-react-app application.
If you are not using cra, just place the html files in the folder of your web server set up to serve static content.
I have recently worked in a pure Scala-Play application and later in a pure AngularJS application. I'm very impressed with both and I'm wondering what is the sweet spot of combining the two frameworks together. Since the two frameworks can be complementary but also overlapping in different areas e.g. MVC and page routing, as far as I know these are some of the possibilities:
Single Page design, use AngularJS MVC-only and use Scala-Play as "dull" service layer backend with no full page refreshes.
Allow page reloads and each page reload becomes a different AngularJS root application. This seems quite flexible e.g. the client side is not bloatted with so much data for larger applications but better partitioned for the different use-cases. The downside is that I'd need different AngularJS MVC applications and I'm not even sure how to organize it as a project. Are there examples of this?
Typical server side Web App, use Play MVC-only and AngularJS for handling UI models for each separate page.
My choice of IDE for these types of architecture would of course be WebStorm but unfortunately I can't have all client-side (AngularJS and JavaScripts) and sever-side (Scala-Play) codes in a single project.
I believe that there is no the ultimate optimal architecture for combining Play and Angular. It depends on the specificity of the project, team etc.
The decision to develop UI part with Angular and the server side back-end with Play is very reasonable. Technically it may be done as following:
Development:
Both parts are developed as detached projects with the preferable IDE.
The client should have some entry point HTML page. It is reasonable to name it index.html, but is may be any other name.
For client-server integration do on the Play side as following:
Select a sub-folder under the play application root, which will serve as the "home" for the client files. The default solution is to use the folder public, since all files under it are automatically deployed.
All client files should be copied under the public folder. The files may be organized in any structure.
Add a route for the default URL as a route to the index.html. The argument path in the route should be the full path of the index.html relatively to the application root.
If index.html is directly in the public folder, the route is like this:
GET /defaultUrl controllers.Assets.at(path="/public", file ="index.html")
Add routing to the client files:
GET /*file controllers.Assets.at(path="/public", file)
Now the distribution package will include all the client files.
Putting of the client files into the public folder should be done automatically, for example by organizing the client directory structure and appropriate configuration of the client IDE.
You can find more examples in this post.
In Grails Asset Pipeline, I am serving HTML, js, CSS, and image files.
In an HTML asset, if I need to supply a src for an image, how should I write that URL to take into account:
that assets might be served from a different base URL, as specified by grails.assets.url
that assets might be served from the Grails server (in dev mode), but under a potentially variable app context
I can think of the following solutions:
always use relative paths between assets.
The problem with this is that if I ever move an asset, then all of its relative links must change.
Another possible issue would be that, if I somehow made Asset Pipeline route proprietary assets to my own static server, and thrid-party assets to public CDNs (e.g., https://ajax.googleapis.com/ajax/libs for angularjs, jquery, etc.), then any static relative URLs wouldn't work.
I assume that I shouldn't ever directly reference js and/or css files outside of Asset Pipeline manifests, so, unless that's wrong, then this problem shouldn't occur for those file types, but, if there's a CDN for common images (does such a thing exist?), then static relative URLs in html files wouldn't work in img src attributes.
angularjs & a javascript variable set via a gsp
Use angularjs in the html file to read a javascript variable that contains the base URL. Set the base URL in a gsp that is referenced by every page.
The problems with this are:
that a separate request for the gsp is necessary (though it should be able to be cached for a long time). Is it possible to compile a gsp at build-time into a js file, and copy the result as an asset, so that it could be included in the Asset Pipeline static bundle rather than served from my Grails server?
that browser cycles are used processing the angularjs code
that certain third-party javascript libraries don't play well with angularjs, so it might be complex to get them working with this setup
from what I know, url() calls in css would still have to be relative, since angularjs wouldn't be able to influence them. Maybe I could use one of the css wrapper languages, like less, but this option is getting much more complicated than option 1...
Are there any other viable options?
Are there any other cons and/or gotchas to either option that I've mentioned above?
I'm using the current version of Asset Pipeline (2.2.5), and the latest version of Grails 2.x (2.5.0).
I'm trying to serve an AngularJS application using the Play 2 Framework for Scala and I think I understand, in general, how the routes and the templates work.
In order to serve the angularJS files (which should NOT be available for users publicly), I'm currently placing them under /public and then creating routes for them.
I would like to have a little more flexibility over where my angular js files are. I'm aware of the assets.at() method that creates an action for this purpose but I cannot serve files that live anywhere other than /public, no matter what I do. I will need to intercept the call and only serve the javascript file if the user has the correct permissions.
So I think my question is whether this is the right approach for what I have in mind (selective serving of angular JS files - depending upon permissions and so on ) and whether I'm stuck with having to place my angularJS app under /public - is it not possible to serve files from anywhere else?
You can wrap the built-in Assets controller. Instead of using the router to invoke it directly, as is the default, invoke your own Action, and use Action composition to wrap it with your authorization logic.
I'd like to see what is not working for you. You should be allowed to have assets served from multiple paths
routes.conf
GET /assets/*file controllers.Assets.at(path="/public", file)
GET /secure/*file controllers.Assets.at(path="/secure", file)
Then in your templates.
<script src="#routes.Assets.at("/public", "test.js")"></script>
<script src="#routes.Assets.at("/secure", "test.js")"></script>
I have two different HTML pages that serve up backbone apps. Up until now, I have put all the js templates inside of each respective HTML file.
Now, I'm refactoring a bit and would like to share some backbone views between files. When loading a view that can't find a js template, the whole app will error out. I know the proper way to merge these two would be to have external js templates, using EJS for example, and have 1 template per file, however, I'd like to just have one huge HTML file with embedded <script type='text/template'> and share the template HTML file between my 2 pages. Is this possible? I tried getting the external js templates with AJAX and writing them to the head, but backbone views still can't find them.
Does anyone else choose to have a file with many javascript templates in it? I also find that I have an unmanageable number of files open when I use ejs. Any help would be most appreciated.
I use an extra javascript/coffeescript file and use underscore's templating to take care of everything. This way you can include the templates and put them into as few (or many) files as you would like.
I'm using a single file for all the templates on my current project and it is working out pretty well.
It's a Asp.Net site, so I made the template file into a user control so I can easily include it in any page that uses Backbone.
If you're fetching all templates through AJAX, maybe you don't have to write them to the head.
You can send templates to the client as JSON Object, for example:
{"about":"<p>About</p>...","gallery":"<p>Gallery</p>...","contact":"<p>Contact</p>..."}
After fetching temples you can store them as templates variable inside some object(or locale storage), and after that you can do the following:
var tempStr = templates['about'],
template = new EJS({element:{value: tempStr, id: 'about'}}),
content = template.render();