filesystem based emberjs app - javascript

I'm building a filesytem based emberjs-app. But unfortunately the security won't allow me to push stuff to the history (see e.g. this but i guess that applies to all browsers).
setting the locationtype to none is fine, but I would still like to utilize the back and forward buttons and urls of the browser.
Is there a way to configure this (maybe setting the base-url to index.html, without rewriting the build process)?
edit
I call the url from my browser like this: file:///path/index.html.
in my routes.js and fileroute.js I've got this workaround:
// routes.js
export default Router.map(function() {
// this route only redirects to main
this.route('fileroute', {path: 'index.html'});
});
// routes/fileroute.js
// only for running app on filesystem
export default Ember.Route.extend({
redirect: function() {
this.transitionTo('fileroute.projects');
}
});
So I guess each hash-change would already effect the files-url
file:///path/#differentroute
also for
file:///path/#index.html/childRoute

Related

NuxtLink redirecting to wrong url

I have a static generated Nuxt site. When I host it loaclly everything works fine but when I load it in GitHub Pages, NuxtLinks hrefs are not correct.
For example one of my link is:
<NuxtLink to="/iot">IoT</NuxtLink>
On localhost my site index is located in http://localhost:3000 and I correctly land on http://localhost:3000/iot.
On (since it's in a Repo) my site index is located in https://lorenzofiamingo.com/prisma/ and I land on in https://lorenzofiamingo.com/iot instead of in https://lorenzofiamingo.com/prisma/iot.
How can I amend this behavior (correcting the root)?
Configure router.base to set the base URL:
// nuxt.config.js
export default {
router: {
base: '/prisma/'
}
}

How to make path for pages in NextJS case insensitive

I have a file under the pages folder named about.tsx. So the path for the page is /about and I'm able to access the page by visiting example.com/about. However, if I visit example.com/About, it will redirect to a 404 page.
I've checked the Nextjs repo, seems like this is the expected behavior. Therefore, is there a workaround that can make the path case insensitive so that example.com/About will also work and direct users to the /about page?
With using next v12
There are a lot of similar questions here that has this answer already. I'd like to note that this answer is handling redirecting with the url parameters by adding this after the pathname:
${request.nextUrl.search}
Add a new file in /pages named _middleware.ts
import { NextRequest, NextResponse } from "next/server";
export function middleware(request: NextRequest) {
if (request.nextUrl.pathname === request.nextUrl.pathname.toLocaleLowerCase())
return NextResponse.next();
return NextResponse.redirect(`${request.nextUrl.origin}${request.nextUrl.pathname.toLocaleLowerCase()}${request.nextUrl.search}`);
}
I agree that's Next.js's behavior, they only handle exact page name about instead of both about & About using the same file page/about.tsx
But the solution is you keep implementing a main page (e.g: about.tsx) and setup other pages to redirect to that page (e.g: About -> about) following this guide https://nextjs.org/docs/api-reference/next.config.js/redirects
// next.config.js
module.exports = {
async redirects() {
return [
{
source: '/About',
destination: '/about',
permanent: true,
},
]
},
}
// Set permanent:true for 301 redirect & clean SEO!

http://localhost/admin/ route not working but works with http://localhost/admin/index.html

Hi Everyone I am working on an AngularJS project.
My project works fine on a route like: http://localhost/
But I have an admin panel like this: //localhost/admin/
So when I open this it's not working
but when I put a complete URL like this: localhost/admin/index.html#
then it works.
Project Structure is:
Please Have A look on Project Structure
If you are running the website in IIS you need to set Default Documents or check if it is set. I had the same issue a while ago and found the not all default were set.
You can create different states as per your project. For ex:
1. /login
2. /admin
3. /edit
and then you can mention configuration for each state with the html page you want to access. then you can use //localhost/admin and it will be referred by /admin state which you have created.
Code should be something like this
$stateProvider.state('admin',{
url:'/admin',
controller: 'AdminController',
templateUrl:'admin/index.html',
resolve: {
loadMyFiles:function($ocLazyLoad) { // this can be used for lazy loading of files
return $ocLazyLoad.load({
name:'MYPROJECT',
files:[
'styles/admin.css'
]
})
}
}
})

react server side rendering with client side routing

An initial server rendering for my homepage route ( / ) works fine.
Also, subsequent client side navigation to ( /#/page2 ) works fine.
However, if I load /#/page2 directly from the address bar, the server rendered homepage loads in the browser first and then visibly transitions to /#/page2, which is not what I want. I want only /#/page2 to show up without first flashing the homepage.
What's happening is that node is serving up the homepage for the request to /, and then when the response hits the client, the client is running the route handler for /#/page2. Both are behaving correctly. But it's not what I want.
How do I avoid this behavior?
I think what I need is a way to for both the server and client to be aware of the different routes and both be able to handle them (isomorphically), however, the fragment part of the url is not known to the server.
Anyone else have this problem?
This problem isn't react specific. It is specific to SSR to a deep link.
My node router handles "/" as follows
router.get('/', function(req, res) {
var React = require('react');
var Router = require('react-router');
var Routes = require("../app/clapi-routes.jsx");
var router = Router.create({location: req.url, routes: Routes});
router.run(function(Handler, state) {
var html = React.renderToString(<Handler/>);
return res.render('index.ejs', {html:html});
})
});
index.ejs is just:
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="/css/json-inspector.css"/>
</head>
<body style="margin:0">
<%- html %>
<script src="/build/bundle.js"></script>
</body>
</html>
Stop using hash powered navigation. Everything that comes after # is client-side only and useless for something like this. So /#/page2 needs to become /page2.
I'm not sure about react, but the same issue exists with other routing systems and there it's really easy to turn off the # in urls.
In angular's ui-router is done like this $locationProvider.html5Mode(true);
Your server-side would need to know to react to all the URLs your client-side knows, but that's how robustness is achieved - doesn't matter how navigation happens (client-side event or link click), both client and server can both handle the scenario end-to-end.
I've found out that there are two steps:
First: Change the react router to use Router.HistoryLocation instead of the default (HashLocation). This makes your routes use html5 push state and changes your route paths from /#/page2 to /page2
// in app.jsx (client side routing)
Router.run(AppRoutes, Router.HistoryLocation, function(Handler) {
React.render(<Handler/>, document.body);
});
Second: Ensure that your node page routes all return the same "index.ejs". Otherwise your routes, like /page2 will 404 on a full page refresh (or deeplink)
// in server.js (server side routing)
router.get('*', function(req, res) {
Router.run(Routes, req.path, function(Handler) {
var html = React.renderToString(<Handler/>);
return res.render('index.ejs', {html: html});
});
});
Additionally: If you are serving "public" static assets, declare that before your routes, and remove any public/index.html you might have so that your node router handles / requests with the server rendered content.

How to create two separate pages in ember

I am trying to integrate ember into my grails app. I've got one page working in Ember but am unsure of how to have two different pages.
I have a page called color.gsp the server does nothing but just redirects to this page so the method is just def color() {}
In this page I have several templates one of which is Application template. I have a App.js which handles everything on this page and everything is working fine on this page.
Question
Now I want to have another page called shade.gsp where also the server should not do anything by redirect so again the method will simply be def shade() {}.
The problem is, how would App.js know whether to update application template in shade.gsp or color.gsp.
I understand this might not be the ideal way to do things in ember. but since I'm integrating ember rather than complete overwrite, i need this option to work. Is there a way I can have separate JS files for color and shade?
I think that changing your js structure, to reflect your dependencies can solve this problem.
// App.js
App.Router.map(function() {
this.route('color');
this.route('shade');
});
// Color.js
// here all color resources
App.ColorRoute = Ember.Route.extend({
// your implementation
});
// Shade.js
// here all shade resources
App.ShadeRoute = Ember.Route.extend({
// your implementation
});
In your ApplicationResources.groovy
modules = {
application {
dependsOn 'jquery', 'handlebars', 'ember'
resource url:'js/App.js'
}
shade {
dependsOn 'application'
resource url: 'js/Shade.js'
}
color {
dependsOn 'application'
resource url: 'js/Color.js'
}
}
In shade.gsp
<r:require modules="shade"/>
In color.gsp
<r:require modules="color"/>

Categories