I am a newbie to Angular and was trying to see if we can access another application(hosted on different port, has a completely different repository and Angular version).
Lets say I have two Angular Typescript projects , A and B.
=======================================
Project A configuration:
Angular 1.5
Typescript 2
Grunt for build purposes.
runs on localhost:8080
=======================================
Project B configuration:
Angular 2
Typescript 2
Webpack for build purposes.
runs on localhost:9000
=======================================
Each of theses apps, A and B are hosted on different repositories.
Now, lets say project A is master and has a tab(button) in it which on click should call the index page hosted on project B.
The button label is 'microapp; and below is the src :
$scope.showMicroApp = function showMicroAppView(isMessagePanelOpen) {
// $scope.isEnvelopeOpen = !!isMessagePanelOpen;
$scope.changeRoute('/microapp');
$location.path('/microapp'); // HOW DO I REDIRECT?
};
Why am I doing this ?
I am doing this to achieve independence in the front end part of my project.
Such that if I change a particular screen/module, I don't have to build the entire project. I can simply build the changed module and see the changes reflected.
Is this achievable ? Do I need to change the existing implementation of the project B?
Kindly help if you have any leads.
Since you have hosted your Applications A and B as separately, you should have to navigate to absolute path instead of relative.
You no need to build both the application modules. Only build the modules that are changed because both are hosted separately on your web server and it will work independently.
I hope this information will helps
Related
I am working on three projects(server, tv client and mobile client). They communicate through a web socket using message types. It's essential that message types should be consistent across the three projects. I've already setup git to manage the three projects within 1 root folder.
projectA // server project
projectB // tv client project
projectC // mobile react client project
shared-files <--- this is where i'd like to place any shared files ( in this case my message type constants )
At the moment i am stuck with importing outside assets to my react project.
I have tried by simply specifying the path to the file but react complains about importing assets outside src.
I also realized that when i do deploy my react app, the file wont be bundled so this wont work. My next idea was something along the lines of including the .js file as project dependencies thru an install but I have no clue how to do that. Have you done something like this yourself? any suggestions?
I'm trying to get started with module development using Abp framework, the potential of using the framework is huge with the community and the abp.commercial support if it's needed, but it's not always easy to up and running the application. Let me explain...
I have created a new module: abp new sample.module -t module. ABP CLI version 3.3.1
After that, I have added a new entity in Domain (member.cs) and using AbpHelper.GUI to auto-generate all the code.
🎉My module works correctly using Hosts/*.web.unified test project. Well done! :).🎉
NOTE: see here if you want to know how to solve a tricky issue for me at this point.
Next, I have added assemblies one by one to the Host App. I have mapped:
Module.Application --> Host.Application
Module.Application.Contracts --> Host.Application.Contracts
Module.Domain --> Host.Domain
Module.Domain.Shared --> Host.Domain.Shared
Module.EntityFrameworkCore --> Host.EntityFrameworkCore
Module.HttpApi --> Host.HttpApi
Module.HttpApi.Client --> Host.HttpApi.Client
Module.Web --> Host.Web
Finally, I added Module Dependencies and Configurations, following this post.
🎉 Restore, build, dotnet ef migrations, and *.HostApp.DbMigrator work like a charm and the database is updated based on the entities in the module. Cool! 🎉
But... when I run my Host App and click on the new module menu contributor the route doesn't work 😒 but it seems to be correct based on the page structure of the module and it worked fine using Hosts/*.web.unified test project inside the module.
I tried several times with no lucky 🤦♂️
Something is missing in the code that I cannot see.
Any help is really appreciated.
Because the Host application and Module are in different solutions. I was missing to include an assembly (Module.Web.Views.dll) into the Host web project.
I am very new to react and drupal 8. I know to create custom modules in drupal and react SPAs, but I m not able to call my react app using a drupal8 controller .
Can someone please make me clear of the flow and the correct way to integrate react app in drupal 8?
So there isn't really a good means of calling a React application from within the regular Drupal controller layer or in the twig templates of Drupal 8.
There are two ways people usually connect a React Application to D8.
Option 1 - Progressively decoupled sites - This is where Drupal still uses the TWIG engine to generate the vast majority of the site views, and can use React for some small part of the site while communicating with Drupal through a Drupal based webservice. Check out this project for more information - https://www.drupal.org/project/pdb. This is a nice option if you just want to add a small React based widget, but want to keep the bulk of your site in using standard TWIG.
Option 2 - Fully decouples sites - This is where you render 100% of your applications view layer using React, and just use Drupal as a CMS that provides a web service. There are multiple options for the webservice portion including https://www.drupal.org/project/graphql and https://www.drupal.org/docs/8/api/restful-web-services-api/restful-web-services-api-overview. So an example of this would be serving a create-react-app on a static server and communication with D8 through a web service.
Here is some additional information that might help guide your decision.
https://dri.es/how-to-decouple-drupal-in-2018
Best of luck!
Long post with some assumptions(but it works):
I was seeking to achieve the same (Drupal 8 and react decoupled block), and I searched and searched, I found myself returning to this page more than once, so I will leave the little thing I discovered here.
My Assumptions:
you have created a custom block that has it's own twig template.
you have defined your libraries in your libraries file (we will review this)
you have created your react app in the root folder of your module with npx create-react-app my-app.
create-react-app my-app creates a react app inside my-app folder, my-app contains all the react code and configs. To get our app(custom react js library) to play well with drupal we will need to override somethings, like scripts to rename our files (build command),to something drupal can identify(recognize) and load.
Run yarn add react-app-rewired --dev, to download react app rewire, that let's us override the default react-app configs without having to eject our app.
In the root of your react-app folder, create a file named config-overrides.js that should contain the below code
module.exports = function override(config, env) {
config.optimization.runtimeChunk = false;
config.optimization.splitChunks = {
cacheGroups: {
default: false
}
};
return config;
};
and edit the scripts in in the package.json to
"build": "react-app-rewired build && yarn run build:dist",
"build:dist": "cd build && copy static\\js\\*.js main.js && copy static\\css\\*.css main.css",
NB: I have edited the build command and added the build:dist script (however if not on windows please
replace copy with cp and \\ with / in the build:dist). This will make sure every time you run the build script, your build files will be renamed to main.js and main.css without the filename..js/css which we can then reference in our libraries.yml file.
my modulename.libraries.yml looks like this (filename = modern_js_drupal.libraries.yml)
react_local:
version: 1.x
js:
my-app/build/main.js: {}
css:
layout:
my-app/build/main.css: {}
and my block.html.twig
<div class="row">
<div id="root">
<h4>React App</h4>
</div>
{{ attach_library('modern_js_drupal/react_local') }}
The reason I named my div 'root' and not anything else if because react app uses the same id when rendering your app.
Look into react_js/public/index.html and react_js/src/index.js. index.html provides the div to hook our app into and index.js renders the app on the div provided ( ReactDOM.render(<App />, document.getElementById('root'));), The advantage of this during development is, you get to create your app and view the changes instantly on your app (http://localhost:3000/) and you can later run yarn build to view the most recent changes on your drupal 8 site.
Having Asp.Net MVC 4 Web Application.
By adding ng-app and ng-view in one of MVC Views I was able to embed AngularJS 1 single page application in it.
Customer hard requirement avoid using Angular 2.
Would like to move all JS to TypeScript (never did TS in Visual Studio).
Is there any standard approach in Visual Studio for that?
Would like to avoid any additional task runners (like grunt, browserify and etc.)
Should I do something like:
Rename all *.js to *.ts
Adding required typings
Prebuild event must transpilling TypeScript into JavaScript (dist folder)
BundleConfig must collect all generated JS (from dist)
Is that a right direction?
Thanks in advance!
I'm trying to put together an app, that uses both meteor and angular
I see, what appears to be two different base angular packages: one named angular:angular, and another named urigo:angular-meteor
The page for angular:angular says, that that is the actual angularJS repo, in which case, assuming that means that angular:angular is not an isopack) I'm not even sure on how to add that to a meteor app.
Which one of these should I be using to add angular functionality to a meteor app?
Urigo:angular-meteor is the package that you can use for development in meteor + angular. check out this video by uri himself explaining thoroughly about the package and development using it also.