Looking for some help/suggestion to integrate SPA.
Our parent app is an ember app, which is having multiple child routes (i.e. combination of ember engines + React ).
How can we support this using micro front end/SPA?
Currently these are deployed to VSI’s however we plan to deploy them to cloud soon.
Thanks in advance,
we tried using SPA framework with our app, however since we have parent app as ember and few child too as ember. I am trying to use ember as one of the child application with single spa, however I am unable to bring child app up.
we are configuring ember app as single-spa micro frontend and updated app Root UI to launch on specific route pattern. Ember App uses global variables, currently our app UI is the main application which is already in memory so when launching another ember app using single spa lib overwrites existing Global variables like Ember, requires which breaks both the applications. According to Single SPA we need use – Single SPA Leaked Globals module https://github.com/single-spa/single-spa-leaked-globals ,which is of no use for us since we already loaded landing ui App (mounted).
Related
I would like to create a React SPA, which is fed by querying a Django REST API.
I was reading this, and I encounter this point:
I see the following patterns (which are common to almost every web framework):
React in its own “frontend” Django app: load a single HTML template and let React manage the frontend (difficulty: medium)
Django REST as a standalone API + React as a standalone SPA (difficulty: hard, it involves JWT for authentication)
Mix and match: mini React apps inside Django templates (difficulty: simple)
It seems that in case of an SPA (Single Page Application), it would be better to choose 1. As far as I understand, the React app would just be a big file with all the required css, html and js, right?
So we just create this file, and serve it on a specific endpoint of the Django app. Then, I do not understand the benefits of the "standalone" way of doing things. We would need two different domains, it would cause issues with authentication, and the standalone SPA would in fact just be serving a static file right? Is there a reason why it would be interesting to use a standalone SPA?
But when I read React in Django or React as a standalone?, it is advised to keep front-end and back-end separated. I wonder what I am missing, and what is the benefit of creating a standalone React SPA. reactjs - React in Django or React as a standalone? - Stack Overflow mentions that it would allow backend to be reused by different applications, but I do not understand what would prevent my backend from being reused if it is serving a static file. My backend will not disappear, it will still be here, ready to be reused, right?
pt1. yes the react app is bundled into a couple of files that you can use in your html template
pt2. standalone would be interesting if you already have a large Django project running, and you cannot afford migrating everything to a React SPA
pt3. You are correct in stating the backend is just another application serving content, and can be accessed like any other API. The difference lies in the content being served: When creating a React SPA, the backend is only concerned about what data is requested and what data needs to be persisted to the database. Now your frontend code can focus on specific frontend problems, such as user experience and browsing/navigation of the user: For example utilizing the Redux store, where you can store your JWT token in the browser session, or cache already retrieved data that might be useful on other pages. This offloads the backend considerably because you don't need to send the same data twice.
When you create an ember-cli addon, you are supposed to be able to run a dummy app.
If a component need to access it's vendor folder you access "public/" in production.
While developping the ember app that use the addon you access :
app.options.project.nodeModulesPath + "/"+ this.name+"/vendor/"
However, when you run the ember-cli addon server (the dummy app) you need only "vendor/".
this.getEnv() will return developpement while developping an addon, or an app using the addon.
How can I, in index.js, differentiate app dev from addon dev ?
Suppose we are in the included hook, you can check this.isAddon() to determine where are you now. Say if you are in the consumer ember app now, you can then invoke path.dirname(require.resolve('ADDON_NAME/package.json')) to get the absolute path of your ember add-on.
One thing to notice, this.isAddon() might not a public API (though it's stable enough, it's still not listed in API doc). If you concerned about this, you can use this.parent.name() to achieve the same goal, when you run with the dummy app, this.parent.name() always returns dummy.
BTW, this.parent is the same thing as app.project where app is the first argument of included hook.
There are plenty of tutorials and helpful posts how to use Django and Vue properly (in various options) all over the Internet.
But I didn't find a single one who describes how to create a Django application which consists of more than one app, each having it's own part of the Vue frontend.
I am creating a Django application with a Vue frontend, and it will have a lot of apps that can be plugged into the main system very easily (using a custom framework). But this only is the backend. I'd like to enable each Django app for having a "plugin" part of the frontend as well: e.g. a set of Vue components that are rendered "dynamically" in the frontend when this app is added in INSTALLED_APPS.
How can I provide "plugin hooks" in Vue to load those components? All the things I have seen (dynamic/lazy component loading with webpack using webpack-loader, etc.) is not what I want. It only describes how to load a component that is predefined later in the http request timeline.
How am I supposed to "merge" all the components? Can I simply create components in static folders and let ./manage.py collectstatic do the magic?
It doesn't matter if the application is a SPA or maybe I have to use Django templates (with Vue components included) - both would be a viable method.
Maybe this even is a webpack question and should be: How do I bring Vue (or React, etc) to collect its sources from different subdirectories like foo_app/static/, blah_app/static/, bar_app/static - is there a way to tell Vue/Webpack/etc to search in myproject/*/static for Vue components to merge?
And can I include "all components" (dynamical amount) than in another component, which is needed for such a system?
Can anyone enlighten me here - is that completely impossible? Or am I thinking in the wrong direction?
Thanks.
I have a couple of VueJS apps in my django site and I'm planning to add more.
I bundle them with webpack with the help of django-webpack-loader.
https://github.com/owais/django-webpack-loader
I've built out a basic django application, and I'm looking to incorporate react+redux into the app. I've come across several react+redux templates like the react-redux-starter-kit and redux-webpack-es6-boilerplate:
These are awesome, except they both run node servers. I'm wondering:
Does there exist some sort of a tutorial or template that has the same features (webpack, Hot Module Replacement, linting, testing, abides by Fractal Project Structure guidelines, etc...) but does not run a node server, so I can just copy it into my django application (I realize I'd have to do a fair bit of configuration to get everything working smoothly).
Is it ok to run the webpack server within my django application? (Basically node would be running within django) Are there any downsides in doing this?
I've tried altering the above two templates, but they are pretty dense and complicated. Any advice would be very much appreciated!
I don't see any reason to mixing up django and react app.
I would prever leave them as two independent parts of your application: SPA (react + redux) + API (django)
If you already have django app and just need to add some react pages into, then build react app as static files and place it outside your django project, and configure your reverse proxy server (nginx) to load those new pages as static pages (react).
I am working on a project that needs to load separate widgets/apps at a later time than at the initial parent ember application kickoff. I want the separate apps to function as standalone ember application while also being able to loaded into the main application. Since I am unable to nest ember applications, I decided to use a subset of the ember functionality and eval the models, views, controllers, and templates when I request them. However these widgets (also functioning as a standalone ember app) have their own routes and data adapters that load controllers and associate them to views. What would be the best way to put the embedded routes into the main application's router and use a separate data adapter for them?
Alternatively if I don't use a separate data adapter and keep the widget to only using the ApplicationRoute to setup controllers can I have these widgets working correctly inside my ember app?
Has anyone attempted something similar?