I'm trying to redirect front end routes to the admin dashboard, as I'm using the Bolt installation as a REST API back end. Here's how I'm routing the content:
contentlink:
path: /{contenttypeslug}/{slug}
defaults: { _controller: 'Bolt\Controllers\Backend::dashboard' }
requirements:
contenttypeslug: 'Bolt\Controllers\Routing::getAnyContentTypeRequirement'
So, all I've done is use the dashboard controller. When I try to visit one of those routes, I get the following whoops error:
Twig_Error_Loader
Template "dashboard/dashboard.twig" is not defined ()
So for some reason it's not looking in the correct place for the template. Is there a way to correct this?
This looks like it's to do with the Twig path which is setup differently depending on whether there is a frontend or backend request.
you can always add a path to the Twig environment that Bolt uses with the following call:
$app['twig.loader.filesystem']->prependPath("/path/to/twig");
The path to the backend twig templates may vary but usually this will work.
$path = $app['resources']->getPath('app/view/twig');
$app['twig.loader.filesystem']->prependPath($path);
Related
I'm trying to display a dynamic link to a Quiz from inside my VuePress V2 documentation. Since that game will be hosted on several IP's, i need to dynamically generate that URL.
Game and documentation will always run on the same IP, but different port.
I am looking for something like this in my markup file:
# Quiz
[Click here to start the quiz](<script>document.write(window.location.href.replace('3000','8080')</script>)
I know I can't use script, but i am hoping for one of the following:
Like i can keep the protocol by calling //example.com and keeping the URL by calling /subfolder, maybe there is a way to call :8080// or sth...
I can make use of the fact that Vue Syntax is allowed. There is a way I can implement logic into .md files by writing
I have { 1+1 } hands.
That will convert to
I have 2 hands.
I can write a custom Vue component and in there reference window.location.href.
We're using Next.Js in next export mode (static HTML export), and we need advanced dynamic routing.
Our routes will look like /[config1]/[config2]/[optionalConfig?]/page, where one segment is optional and the page names are fixed. For example a/b/c/page1 or a1/b1/page2. The pages need the configuration segment data to render.
I haven't found any way to do this with the built-in routing. I can do /pages/[config1]/[config2]/page1.tsx, but that optional segment seems to be an issue. Note that a custom server does not appear to be an option, as we have to use next export mode due to other constraints.
NOTE: We don't know the paths at build time; they represent part of our runtime configuration. This has to use client-side routing. (We do know the finite set of pages - say page1 ... page10 - but the routes to those pages will vary.)
I've tried switching to React Router, setting useFileSystemPublicRoutes: false and adding routes to pages/_app.tsx (Custom App). That almost works, but I see many 404s for on-demand-entries-utils.js in the console as well as some "Possible EventEmitter memory leak detected" warnings (in development mode).
Valid solutions (must work 100% client-side):
Way to do this with built-in routing
Example of integrating React Router with Next.Js
Alternative library (I've looked at next-routes but that hasn't been updated in 3 years)
UPDATE
We may be able to eliminate the requirement of an optional segment. However, it appears that we have to implement getStaticPaths and specify all of the routes. For example:
pages/[config]/foo.tsx
export async function getStaticPaths() {
// Runs at build time
return {
paths: [{ params: { config: 'xyz' } }],
fallback: false,
};
}
export async function getStaticProps(context) {
return {
props: {},
};
}
export default function FooPage(): JSX.Element {
return <div>FOO</div>;
}
This will generate
┌ ○ /
├ /_app
├ ● /[config]/foo
├ └ /xyz/foo
The issue is that we do not know the config at build time.
We need dynamic client-side routing. We'd like to stay with Next.js, as eventually we may be able to use SSR, but that's not an option at the moment.
You can create a catch-all route to grab the parameters, including the optional one, and then you'll need to render the right component based on that. So if you created:
pages/[...config].tsx
This is the same as:
pages/[...config]/index.tsx
Then in index.tsx, you can get the config as an array of strings in getStaticProps based on the url. So /config1/config2/optional is [config1, config2, optional] and /config1/config2 is [config1, config2].
So you can use this as a directory path of sorts if you need to add additional subpages under the known and optional paths.
I'm working on a ClojureScript Single-Page app with routing on client-side. I'd like to implement a simple server with would serve my index.html as well as CSS/JS. The idea is to pass all requests apart from /static/* down to client-side and allow my SPA to deal with it.
It turned out to be surprisingly difficult. The snippet below is something I came up, but it doesn't work.
(defroutes routes
(GET "/" []
(resp/content-type template "text/html"))
(context "/static" []
(route/resources "/css" {:root "css"})
(route/resources "/js" {:root "js"}))
(route/not-found
(resp/content-type template "text/html")))
I use boot-http with custom handler. Any chance it could cause it?
Sounds like you don't need a backend at all; you can develop with boot-http/boot-reload and deploy to gh-pages, firebase, aws or any static file host. See https://github.com/martinklepsch/tenzing for a template project #nobackend.
Ive created a basic Polymer app from the starter kit (via Yeoman). I've today deployed it to the 'sandbox' on my domain and am getting a strange routing issue. The app is essentially a feed reader.
View app here
When I first visit the app I'm given a blank page whereas locally I'm taken straight to the feed. When clicking on 'News Feed' I'm then taken to the feed as expected.
I've added a route for the path of the domain structure as below but this did not fix it.
You can view the full code of the project here.
routing.html
page('/', function () {
app.route = 'home';
});
page('http://purelywebdesign.co.uk/sandbox/f1feedreader/', function () {
app.route = 'home';
});
I've also tried:
page('/sandbox/f1feedreader/', function () {
app.route = 'home';
});
Any help much appreciated.
Page.js allows you to configure the base path:
page.base('/sandbox/f1feedreader/');
or just use window.location if you don't want to tie is to that specific deployment.
page.base(window.location.pathname);
This is an issue with the way the router page.js works. I assume you were testing with gulp serve (which creates a server and sets the web app base url of "/" to be localhost:3000/). The way you're currently setting your page.js routes is that it's looking exactly after the domain name and not at the "root" of the web directory.
In your case page.js is looking at everything after http://purelywebdesign.co.uk/ (meaning all your routes include should start from sandbox/f1feedreader instead of just /f1feedreader).
The documentation for page.js https://visionmedia.github.io/page.js/ says that it uses regular expressions so you could also update the strings.
I would like to make an AngularJS app with HTML5-style URLs (i.e. with no # fragment in the URL). Thus in the routing controller module of my Angular app I've got something like the following:
angular.module('app').config(['$routeProvider','$locationProvider',function($routeProvider,$locationProvider) {
$locationProvider.html5Mode(true)
...
}
$routeProvider
.when('/1/:param', /* do something */)
.when('/2/:param', /* do something else */)
.when('/3/:param', /* do something else again*/);
A number of working examples like AngularFun don't use HTML5 mode. For a request like http://localhost:3005/#/1/foo, it's clear that
the http://localhost:3005/ part is handled server-side / by Express. Express happily serves our Angular-enabled index.html
the /1/foo route is handled client-side by Angular's router
Say our server.coffee looks, as standard, something like the below (we serve the static dist directory that contains our compiled, minified Angular sources:
express = require 'express'
routes = require './routes'
dir = "#{__dirname}/dist" # sources live here
port = process.env.PORT ? process.argv.splice(2)[0] ? 3005
app = express()
app.configure ->
app.use express.logger 'dev'
app.use express.bodyParser()
app.use express.methodOverride()
app.use express.errorHandler()
app.use express.static dir # serve the dist directory
app.use app.router
routes app, dir # extra custom routes
If we do use HTML5 mode, our URL http://localhost:3005/#/1/foo becomes http://localhost:3005/1/foo (no more hash #). This time, the entire URL is intercepted by Express, and it gets confused because we don't define routes other than /.
What we would really like to say is that the latter part of the URL (/1/foo) should be 'delegated' to Angular for handling. How can we say this?
It appears that it does all work. I didn't do that work myself, however. I relied on this skeleton project:
https://github.com/thanh-nguyen/angular-express-seed-coffee
This allows you a certain degree of control over which paths are handled by the client and which by the server.