I am tasked with updating a Microsoft Frontpage website and I am going to use Polymer with the Polymer Starter Kit. In that it uses a javascript router to handle pages. Now it will be hosted on an apache server and I know how to setup apache to route everything to my index.html file to get the router to do my routing, but I am looking for a way to also route to existing static pages as I work on the conversion of this website so I can release pages as I go and users can still access the old pages that I haven't converted yet.
Is there an easy way to handle this scenario?
Related
My website is almost complete on next.js. I am trying to create widget to one of my component that can be embedded on any website without iframe. Please help me out
Use a Web Component Framework
First understand what web components are.
https://developer.mozilla.org/en-US/docs/Web/Web_Components
recommended frameworks
https://stenciljs.com/docs/introduction (made by Ionic)
https://github.com/github/catalyst (made by Github)
https://lit.dev/ (made by Google)
Your website being in next.js would not be a factor here. You should build your web component then serve it via CDN or via static folder in next.js. You could reuse your REST routes or styles etc. but you would want a proper modern web component.
So i have this social media app with multiple pages, it's all created with create react app with context api and react-router for routing and laravel for backend. Now, google won't be able to index these dynamic pages, i have tried pre rendring the pages using react-snapshot, currently looking into next js.
i know react has this react dom server, will it be good idea to hook up another server just for pre-rendring the page before sending it to the client.
Is there any other way to do ssr with cra.
First things first, Google is able to index client-side rendered pages.
I think next.js is a good choice for SSR, but you can also look at razzle - maybe you can retrofit that to your CRA setup.
Google should index your website. please check your robots.txt file and also try to provide sitemap.xml for better crawling for google.
Also, there are some issues with using react-snap and that is you render the page at build time and your site render won't change if you read your content from the database and update your database while you didn't rebuild your app.
you can use after.js but next.js have a bigger community and more tutorials out there so I recommend you use next.js.
Also, there is a tool named prerender.io(open source) and you can serve rendered page to search engine bots this is the easiest way in my opinion and do not have the downside of using react-snap
I'm developing an Angular 5 application and I've built it and dropped the contents of the dist/ directory onto a docker container.
When I navigate the app using the app's navigation (utilizing routerLink) there's no issue with finding the page you are looking for. The reason there is no problem is because Angular manipulates the DOM based on user interaction.
But if the user hits the refresh button on a page other than the index.html, the web server sends a 404 page. This is because Apache (or I guess any server OS) is looking for a page "file" that doesn't exist. Angular's router is in the JavaScript package sent to the browser. Since it isn't on the server, when the server receives a request for a path that isn't index.html, it doesn't find anything in .htaccess and simply returns the 404.
One solution to this problem would be to update the .htaccess file with all of the routes of the Angular application so that it redirects all routes to the index.html. This seems kind of messy though. And how would you preserve the request for the specific page and feed it to Angular?
So the question: Is there a way to make apache aware of an internal page in an Angular app and load the Angular app at that page? Or is .htaccess modification the only way?
.htaccess rewrite is pretty much the goto solution. This page describes it pretty well.
I believe this can be considered a very silly question, but I'm really stuck on it for some time. I have a very simple Ember.js application (that means I am not using Ember-CLI) and since I am using the Facebook SDK in it, I need a valid domain.
Until now, I've ran my app simply by double clicking the index.html file in the browser.
Then, in order to have a domain for my app, I've tried using nginx inside a Docker container (so that I can add the http://<docker-ip> URL in my Facebook settings). The problem was that nginx (with the default configurations from the official Docker image) was somewhat loading a stale version of both JS files and index.html, even though the container had the latest versions of the files. I've even tried destroying the container, then starting it again and the issue persisted.
I've then tried looking at other approaches, but none satisfied my need of something simple:
node.js server, too much for serving a very basic app;
middleman, too much setup because I don't need to compile stuff (no .hbs, no less etc.);
ember-cli server, doesn't work with a normal Ember.js app;
other small JS servers, had to configure them too much for just serving some static files;
GitHub Pages and S3 do work, but...I don't want to deploy each time when developing.
So, please help me in this silly quest, how can I serve a basic Ember.js app (preferably from a Docker container)?
am using page.js for routing in a Grails application using '/' to point /HomeController/index to serve up a single page web application. I just installed Grails Spring Security Core plugin, and I am using the Grails scaffolding to create the User Admin/Permissions views with the goal of serving them in the traditional multi-page way to avoid having to do a lot of UI work on admin pages. The bulk of the application will be served using single page architecture, with just the admin pages being served multi-page.
In their documentation, page.js says, "By default when a route is not matched, page.js will invoke page.stop() to unbind itself, and proceed with redirecting to the location requested. This means you may use page.js with a multi-page application without explicitly binding to certain links." But, I cannot get it to work...
I am using page.js like so:
page('/', SCM.Dashboard.home);
page('/hx', SCM.HX.summary);
page('/hx/vendor', SCM.HX.vendors);
page('/hx/customer', SCM.HX.customers);
page('/customer/list', SCM.Customer.list);
page('/maintenance/activity', SCM.Maintenance.activity);
page();
When I click a link to '/user', based on their documentation, I expect it to forward directly to 'http://domain.com/user'. It adds the correct path to browser location bar (http://domain.com/user), but the browser never forwards to the page. In order to see the page, I have to click the link, and after the location bar has changed, if I refresh the browser window, the correct page appears - obviously unacceptable. Yet, I cannot find in their documentation how to implement this correctly. I have experimented with various settings for hours with no luck. If I comment out the page.js code above, the multi-page admin pages work fine, and I am able to navigate from page to page no problem. Has anyone solved this problem?
I just upgraded from version 1.4.0 to version 1.5.0 and it links between the Single page (Main app) and Multi-page (Admin functionality) portions of the application seamlessly with no configuration needed!! Excellent feature addition!