I am building a website based on https://github.com/Vheissu/aurelia-starter-node. It will have some backend logic in the /api area and there will be also a SPA area handled by Aurelia. I would like to:
read config in express app (https://www.npmjs.com/package/config) using require('config')
use this config on the server (usual stuff)
use a subset of this config on the client (in the Aurelia app)
I know about https://github.com/Vheissu/Aurelia-Configuration but I don't want to maintain two config sets handled by different libraries, dealing with setting the environment in two places etc.
Question: is there a clean way to do what I am looking for?
My thoughts so far:
pass something to aurelia bootstrapping logic, but I can't find any info about this
ugly solution: rendering the config as global variable into index.html (the one which is the master page for the SPA) and read it from Aurelia code, more less like How to pass data from ASP.NET WebForms to Aurelia Global Scope
I ended up keeping the configuration in the server code and rendering only the client part of it to the body of the page like so:
When defining aurelia routes for my app:
let model = {
clientConfig: {
x: 123
}
};
res.render('index.html', model);
And then in view (using ejs templates):
<script>
var config = <%- JSON.stringify(clientConfig) %>;
</script>
For me this feels much cleaner than maintaining the config in two places.
Related
In my project I have the following requirement: having 2 routes that are dynamic but that are going to be drawn by different components.
More context:
I have a CMS that provides all the info and in most of the cases I'm going to read from a "page" model. This is going to be drawn by the Page component and its going to have a getServerSideProps that makes a call to a CMS endpoint to get that information
The endpoint and component are not the same for the other case with a dynamic route
Both types of routes are completely dynamic so I cannot prepare then in advance (or at least I'm trying to find another solution) since they come from the CMS
As an example, I can have this slugs
mypage.com/about-us (page endpoint & component)
mypage.com/resource (resources endpoint & component)
Both routes are configured using dynamic routes like this
{
source: '/:pages*',
destination: '/cms/pages'
}
The problem here is that it can only match one of the endpoints and the logic for both calling the endpoint and the component used to draw it are completely different
Is there a way of fallbacking to the next matched URL in case that there's more than one that matches similar to the return {notFound: true}?
Some solutions that I have are:
Somehow hardcode all the resources urls (since are less than pages) and pass them as defined routes instead of dynamic routes
Make some dirty code that will check if the slug is from a resource and if not fallback to a page and then return a Resource component or a Page component depending on that (this idea I like it less since it makes the logic of the Page component super dirty)
Thanks so much!
I am coding a little website to be my homepage.
So far I managed to do what I wanted with express and handlebars templates but I am doing this website to test my boundaries, and I lack using a frontend framework and working with web components.
so for the sake of challenge and learning, I settled on svelte
which is not exactly a framework, I read, but is a delight to write with and seems very promising on the performance side.
The problem is I want to keep the hand on my website, and sapper, the full framework that comes with svelte, is a bit too much of a black box for me.
(you put this file here and that file there,
compile with this complex configuration you shouldn't touch
and BOOM you got routes)
What I would like is to use express to manage the routes and then render the svelte app, either with a different page/app for a route, or the same app with different variables.
Could anybody point me in the right direction?
I considered using sessions or a socket, but I have no idea of how to listen to this client-side and the documentation/articles about svelte are sparse and all talk about sapper.
here are a few lines of code I wrote in a test app. I know it's not the way you do it but it was for curiosity's sake
// --------------server.js
// ...
app.set('view engine', 'hbs')
app.set('views', path.join(__dirname, '../views'))
// Using a view engine on TOP of svelte
// is certainly a bad choice
app.use(express.static('app/public'))
// to make the svelte compiled .js and .css available
app.get('/test', (req, res) => {
res.render('home', {user:true})
// I tried to send props like this
// it did not get the props in svelte,
// but what I found is that svelte ADDS itself to the page
// and does not remove the HBS code, event though it is in the target container
})
edit
I will finally use sapper, thank you for the advices...
I really would like them to implement some sort of svelte middleware that allows to render/serve pages individually (once they are build of course)
If you do it like that, splitting your web application into several independent svelte apps that are served from express, then you need to keep the (web-)application wide state on the backend or keep it in the local storage on the browser. You can't use the states provided by sveltes store (writeable, etc), because that's in-memory and destroyed whenever you navigate to a new page (via express).
If sapper is to much magic but you want to keep running a single-page-app, have a look at svelte-spa-router. That isn't configuration based.
I’m new to vue.js. I have a requirement to develop a calendar with a scheduling feature for a Classic ASP project. I did some research and found the following project on GitHub which is developed using vue.js.
https://github.com/ClickerMonkey/dayspan-vuetify
I can use this project to implement the feature as a separate application. But I need to plug this inside to classic ASP project since there is no API to develop separately.
I was spending a lot of time to find how to make that possible but couldn't find an easy guide. Any help would be greatly appreciated. Thanks.
Using Vue#Next(AKA v3) you can instantiate separate Vue apps on the client.
Simply include the vue3.js client file, extract the desired methods from Vue,
create the app with its configuration and mount it to the desired DOM element.
You'll need to support interfacing, likely when the component is "mounted", between the app and third party object like a calendar scheduler class, cookie class, localStorage whatever you want to support. You can even communicate between app if you set up handles between them. Vue 3 also has providers and injectors which let you affect state and methodology at a parent level and inject it at child levels without the need to pass through each child level.
It's great for learning, rapid development, prototyping, small test components, trial and error type work, but it's a step or few away from typical Vue development paradigm.
FYI, Vue3 also supports dynamic asynchronous components.
<script src="/dist/vue.global.js"></script>
const { createApp, defineAsyncComponent } = Vue;
const app1 = createApp({first app configuration object});
const app2 = createApp({second app configuration object});
const vmApp1 = app.mount( app1 selector );
const vmApp2 = app.mount( app2 selector );
We have an old Yii application along with new Symfony one.
The basic idea is simple - I need to check if there is a route matching in Symfony application then it is cool, if not then bootstrap Yii application and try to handle the request with it.
The main idea to not instantiate AppKernel (and do not load autoload.php - since there is two different autoload.php for each project) before I am sure there is route matching.
Can I do it somehow?
We've done this before with legacy applications.
There are two approaches you can take.
Wrap your old application inside a symfony project (recommended).
Unfortunately this will indeed load the symfony front-controller and kernel. No way around that. You need to make sure that symfony can't handle the request and to do that the kernel needs to be booted up.
Use sub-directories and apache virtual hosts to load one application vs the other as needed.
Given option 1,
You can either create your own front controller that loads either symfony or yii by reading routes (from static files if using yml or xml, or annotations which will be more complex) OR EventListener (RequestListener) that listens to the HttpKernelInterface::MASTER_REQUEST and ensures that a route can be returned.
Creating your own front controller is the only way that you can make it not load the symfony kernel, but it will require you to write something that understands the routes in both frameworks (or at least symfony's) and hands off the request appropriately.
Event listener example:
public function onkernelRequest(GetResponseEvent $event)
{
if (HttpKernelInterface::MASTER_REQUEST !== $event->getRequestType()) {
return;
}
... Code to continue normally, or bootstrap yii and return a custom response... (Can include and ob_start, or make an http request, etc)
}
public function getSubscribedEvents()
{
return [
KernelEvents::REQUEST => ['onKernelRequest']
];
}
As you see, the kernel needs to be booted to ensure symfony can't serve the route. Unless creating your own front controller (as stated above).
A third approach would be to create a fallback controller, which would load up a specified URL if no route was found within symfony. Although this approach is generally used for legacy projects that lack a framework and use page scripts instead of proper routes, and definitely requires the use/help of output buffering.
The EventListener approach gives you the opportunity to create a proper Request to hand off to yii, and using what is returned to create a Response as proper symfony object (can also use ob or other options).
Thank you.
This is an alternative to vpassapera's solution -http://stovepipe.systems/post/migrating-your-project-to-symfony
We have a number of separate laravel projects using routes to implement online api's. I am creating a separate laravel 5 project to 'collect' these routes.
As theses routes can change over time, I thought it would be a sensible option to create a route in each separate laravel project which returned a json of available routes in that project. Something like;
App\Http\Controllers\RoutesController#routes
with method
public function routes(Request $request)
{
$routeCollection = Route::getRoutes();
$routePaths = [];
foreach ($routeCollection as $route) {
$routePaths[] = $route->getPath();
}
return response()->json(['routes'=> $routePaths], 200);
}
Then the collecting app can simply query this same route for each individual project url. I think this feels like a fairly good solution. However I want to check before I implement this that I am not reinventing the wheel.
Does laravel have a way to 'broadcast' all publicly available routes? - or some way to scan for all available routes from a given url? Or are there better ways of doing this?
You can get a list of all routes in the same way that the artisan route:list does, you can see the function you can call here:
https://github.com/laravel/framework/blob/6e31296d6531d0148aadf09c5536b89dda49dc27/src/Illuminate/Routing/RouteCollection.php#L243