I am developing an app using the MEAN stack.
I have a public side to the site and private and using Angularjs there is one index.html which includes all the js file includes which i dont want them showing if on the unauthenticated part of the site.
So was wondering is it possible to have two files i.e. index.html and indexpub.html which i can use and include the relevant files.
Thanks in advance
Related
We have built a project (Web Application) in React .net core using react in client-side rendering.
We've used react-helmet for dynamically assigning meta tags.
The issue being when the app renders in the browser. The browser gets only the static HTML on initial load which does not include the dynamic meta tags we have set. However on inspecting you get those meta tags under "Elements".
Also, if we use these URL for sharing on any social media, like WhatsApp or Facebook, the URL does not render any metadata as it should.
Tried searching for solutions to our problem, the most obvious answer we came across was to try server-side rendering instead. We get that, but it is not a solution to try out at this juncture when we're ready with app to roll it out.
Others we came across were "react-snap", "react-snapshot", but no luck
with react-snap, it requires to upgrade React's version to 16+, which we did but I guess not all dependencies were upgraded, there was an error saying "
hydrate is not a function
(hydrate concerns the react-dom)
With react-snapshot, we could not find the necessary type definition, which is required in react .net core to function properly
Please guide for the next probable step (except the paid ones like prerender, etc)?
Main goal: Social Applications should render the meta data when we paste/share the URL within them.
Prerender is the only solution.
I used a node dependency called "prerender" -> https://github.com/prerender/prerender
It works enabling a web server wich make http requests. Assigning value to a boolean: window.prerenderReady = true; in your website tells your server when the page is ready to "take the photo" and it returns the Html when so. You need to program an easy script that parses all the site urls and save those html contents to files. Upload them to your server and using .htaccess or similar target the crawlers external-hit-facebook,twitterbot,googlebot, etc.. to show them the prerendered version and 'the real site' to the rest of user-agents.
It worked for me.
The meta tags for Open Graph need to be present in the HTML which is sent back to the client when fetching a URL. Browsers or bots will not wait until the app is rendered on the client side to determine what the metatags are - they will only look at the initially loaded HTML.
If you need the content of your Open Graph metadata to be dynamic (showing different content depending on the URL, device, browser etc.) you need to add something like react-meta-tags into your server code.
There are no type definitions available for any of the react meta tags libraries, but you can add your own. It can be a bit tricky, but check out the official documentation and the templates they have provided to get started.
If you don't need it to be dynamic, you could add the tags into the static parts of the <head>-tag in your index.html.
I had the same issue today. I had two React Web applications that need this. Here is how I solved it:
put your preview image in the public folder
still in public folder, Open index.html, add the line <meta property="og:image" content="preview.png"/>
or <meta property="og:image" content="%PUBLIC_URL%/preview.png"/>.
Go to https://www.linkedin.com/post-inspector/ to check if it works.
I hope this would help!
I am developing a web app that has a sign in page for signing in. But also, for example, there is a public page for facebook sharing page.
If a user wants to go into the panel, url is:
http://127.0.0.1:3000/#/shops/:id/
If someone makes a Facebook share, we have a public page like:
http://127.0.0.1:3000/#/public/56af5229d0ae74e324c662f9
My problem is, I have 1 index.html for this app, and it includes css, js links and a ui-view for ui-router. For public page, all those unnecessary files are loaded.
In index page, I have:
<div ng-if="isPublic()" ng-include="'views/public.base.html'"></div>
Also, I cannot control the meta tags of the page.
How you can handle separation of pages in such a case?
I have a site with public/private parts, but I took a different approach in terms of resources. I did not separate them since it would be just to much work, instead I did this:
Minification
Bundling
Pre-compressing
Caching-forever with the hash-string
Putting all the html templates in a js bundle
Yes, this will make all the js/css that is not needed for everyone to load, but you can think of this as a standalone application: you have to download the whole executable/package and install it but you don't use all the functionality (e.g. think of Office). If you optimize all as much as possible, the few additional kilobytes won't do any difference and the data will be already there when the user logs on to private part.
P.S You can see how to do some of the points in here.
I intend to build a typical information website that has a number of pages that do not require authorization to view them, however I also want to have a private section for staff to log in. For simplicity I am hoping I can do one Web API project and have everything within it to simplify my publishing to azure, simplify domain names and certificates etc.
Is it ok for me to have index.html as a container and use ui-router to navigate through even the public pages or would it be better to have all public pages as full html files and do typical href navigation between them?
Below is the possible structure I was thinking of
app/ -> all angularjs stuff including private views and controllers
Models/
Controllers
Index.html -> public home page
public/ all public pages
What I am trying to achieve is that all public views can be accessed via http but once the login page is accessed all traffic must from then on be https, does anyone have any experience of this?
Update:
I have decided to force https for all pages, does this take the structure worry away in that everything just goes under app?
Best way to keep this is as a full Angular SPA, using ui-router to move between views instead of having static pages (even if your partial views are just plain HTML without functionality). You can affect the UX by alternating between dynamic routing with Angular and typical old href navigation. The less the you make the user reload pages, the better user experience he/she will get, plus you must be consistent in the way the application flows overall so the user doesn't have bad impressions of it.
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 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.