I'm struggling with setting up Durandal to run under an IIS virtual folder, when using PushState :true in the router config.
Works fine when running through say http://localhost:24567
But if I run under http://localhost/testapp (testapp is the virtual folder), the routes don't work, and the route links are being rendered without the virtual folder "testapp"
Is there a way to set a base url either using require.js config or via Durandal router?
Thanks
Ok, feeling a little stupid and should have RTFM!
There is a root option when activating the router, especially for when using push-state.
http://durandaljs.com/documentation/Using-The-Router.html
router.map([
{ route: '', title:'Welcome', moduleId: 'viewmodels/welcome', nav: true },
{ route: 'flickr', moduleId: 'viewmodels/flickr', nav: true }
]).buildNavigationModel();
return router.activate({ pushState : true ,root:'/MvcApplication1'});
Moral of the story, read the manual more carefully.
Thanks to Yago who has authored a fantastic demo app for Durandal that includes membership/client side authorisation as well as oauth logins,
Durandal Auth
Related
I made an Svelte Kit its working in my local with no problem but when i build it like this:
import adapter from '#sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
fallback: 'index.html',
})
}
};
And gives me 3 folders and they are: client, prerendered, server.
I'm uploading this 3 folders in my hosting and move the folder files into root folder. Everythings works with no problem BUT i have an api that sends mail. It's gives me 404? Send mail is working in localhost but not working in hosting. I can't fixed it. In manifest.json:
{
type: 'endpoint',
id: "api/sendMail",
pattern: /^\/api\/sendMail\/?$/,
names: [],
types: [],
load: () => import('./entries/endpoints/api/sendMail/_server.js')
},
The path is correct by the way.
The folders in hosting:
Photo
What can i do?
By specifying a fallback page, this means you're turning SPA mode on, so you can't use server endpoints.
From the adapter-static readme:
You can use adapter-static to create a single-page app or SPA by
specifying a fallback page.
The reason this is working local in dev:
During development, SvelteKit will still attempt to server-side render
your routes. This means accessing things that are only available in
the browser (such as the window object) will result in errors, even
though this would be valid in the output app. To align the behavior of
SvelteKit's dev mode with your SPA, you can add export const ssr =
false to your root +layout.
I'm trying to load a Vue application on one of my sub pages. The site is an Episerver CMS site running ASP .NET on IIS.
When trying to load my Vue application on one of my sub pages, the url is changed to my start page url. The application works fine but since the url is changed, the application breaks on page refresh.
I'm using Vue router with hash mode (Hash mode is REQUIRED. When using history mode everything works fine).
Let say my application is loaded on the following url:
https://www.example.com/subpage/appstart/
My route configuration:
{
mode: 'hash',
base: '/',
[
{
path: '/',
name: 'home',
component: Home
},
{
path: '/page1',
name: 'page1',
component: Page
},
],
}
I've tried to use '/subpage/appstart/' as base but that does not seem to have any effect when using hash mode?
When navigating to my application:
https://www.example.com/subpage/appstart/
The url is changed to:
https://www.example.com/#/
The application works and so does the routing. Navigating to one of the pages will end up using the following url:
https://www.example.com/#/page1
How can I make the application work from the correct root url, so that my application Home stays on the correct url:
https://www.example.com/subpage/appstart/#/
https://www.example.com/subpage/appstart/#/page1
I have a Vue CLI 3 based app which I would like to function as a PWA.
I need it to work in history mode, because the hash intervenes in redirects that I'm doing as part of an OAuth based authentication process.
When the routing is in hash mode, the manages to load fine as PWA. Once I change the mode to 'history', the PWA I installed won't load anymore - I'm getting a white screen instead. I checked the browser version and it still works fine (I configured the fallback in my NGINX server to index.html).
At first I used the default settings provided with vue CLI project and the PWA plugin. After doing some research, I added the following to my vue.config.js:
pwa: {
workboxOptions: {
skipWaiting: true,
navigateFallback: 'index.html'
}
}
and I saw that the following was indeed added to service-worker.js:
workbox.skipWaiting();
...
workbox.routing.registerNavigationRoute("index.html");
but it still didn't help. Even though the app registers successfully on my mobile device's homescreen, it just won't run unless I change the routing back to hash mode.
Does anyone have a clue what I might be missing?
Thanks
I have the same problem, i solved it by adding this in the end of my router.js
{
path: '*', // or '/index.html'
beforeEnter: (to, from, next) => {
next('/')
}
}
Try /index.html instead of index.html.
How do I specify a catchall or actually a catch[most] for express so when the user selects refresh on a page that is actually contained in the app bundle, the GET doesn't fail.
home.html
profile
app.js
config.map([
{ route: ['', 'home'], name: 'home', moduleId: 'home' },
{ route: ['profile'], name: 'profile', moduleId: './profile/profile'}
]);
If I click on the profile link, the URL shows localhost://profile and the page renders correctly without performing a GET because the requested resource was bundled in the initial GET. But lets say I refresh the page with localhost://profile, then it makes a server GET request for that page.
If on the server I specify something like:
app.use('/', express.static(__dirname));
app.use('/profile', express.static(__dirname));
It works properly. I was anticipating some type of catch all formatting so I don't have to add every possible route for an app with all routes bundled. Something like:
app.use('/*', express.static(__dirname));
Then the following to capture GET's for another app
app.use('/othercoolapp/*', express.static(__dirname)+'/othercoolapp/');
But it doesn't work...
This issue you're encountering applies to every single page application framework and library with pushState routing enabled.
Above your app.listen or equivalent line of code in the file that bootstraps your Express server, add something like this:
app.get('*', function(request, response){
response.sendFile(path.join(__dirname + '/index.html'));
});
The general idea is that this generic wildcard route will capture all URL requests and send the index.html file. This allows Aurelia to handle its own routing.
Using the ASP.Net Durandal template in Visual Studio. I added the following to the main.js:
router.mapNav('clients');
router.mapNav('client/:id');
These links then both work but I don't want client to be available in the navigation, if I remove that line then the link no longer works. Is there an easy way to set it to be invisible or have I entered my routes in the wrong place?
If you're using Durandal 2.0, you can specify more options for the router navigation, and it looks something like this:
//Durandal 2.0
router.map([
{ route: 'clients', title:'clients', moduleId: 'viewmodels/clients', nav: true},
{ route: 'client/:id', title:'client', moduleId: 'viewmodels/client', nav: false }
]).buildNavigationModel();
If you're using Durandal 1.x, I strongly recommend upgrading to 2.0. There are multiple bug fixes as well as some important architectural changes that will make your life easier in the long run.
if that's not an option, there's a way in Durandal 1.x to prevent the route from appearing in the navigation as well:
//Durandal 1.x
router.mapRoute({ url: 'clients', name: 'clients', moduleId: 'viewmodels/clients', visible: true });
router.mapRoute({ url: 'client/:id', name: 'client', moduleId: 'viewmodels/client', visible: false });
With Durandal 1.x, you'll need to inspect the visible property of each route before adding it to a menu collection. With 2.0, the buildNavigationModel function will do this automatically.