From 87517a9b4e2d53e8caf076154252172de26f63ff Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 11:58:17 -0500 Subject: [PATCH 01/11] Added the Multiple application integration guide --- advanced/multiple-application-integration.md | 97 ++++++++++++++++++++ 1 file changed, 97 insertions(+) create mode 100644 advanced/multiple-application-integration.md diff --git a/advanced/multiple-application-integration.md b/advanced/multiple-application-integration.md new file mode 100644 index 0000000..6a20c2a --- /dev/null +++ b/advanced/multiple-application-integration.md @@ -0,0 +1,97 @@ +How to have multiple applications in a single application +============== + +This guide presents how to integrate multiple "child" Compound applications in a "parent" application. +After the integration, the child applications can still be used as standalone for easier development. +This guide is divided in two sections: how to prepare the child applications for the integration and how to do the integration in the parent. + +Integration guide +============== + +Modifications to the child application before the integration: +-------------- + +- At the beginning of “config/environment.js” add the following code : + (Where UNIQUE_NAME is a name to serve as a unique identifier of your application) + + if(typeof compound.subRoot === 'undefined'){ + compound.subRoot = []; + compound.subPublic = []; + compound.subRoot['UNIQUE_NAME'] = compound.root; + compound.subPublic['UNIQUE_NAME'] = ""; + } + +- Change all **compound.root** and **compound.app.root** in the project that directs toward a local file by **compound.subRoot['UNIQUE_NAME'];**. +- For the whole project, add the compound.subPublic['UNIQUE_NAME'] everywhere an element of the public folder is called without the Compound.subRoot['UNIQUE_NAME'] + (i.e. those that uses a relative path to web host instead of the file system). + + (NB: subPublic will have the / at the end once integrated) + Example: "/"+compound.subPublic[UNIQUE_NAME]+ "images/images.jpg" + +- Rename the “application_controller.js” and “application_layout.js” to a unique name. +- Change the load('application'); in the controllers to use the new name. +- If applicable, change the route to change the “application” route to use the new name. +- In the application controller, add **this.publicPath = compound.subPublic['PRT'];** and change the javascript and style inclusion in the child’s layout. + + <%- stylesheetLinkTag('../'+publicPath+'stylesheets/bootstrap')%> + <%- javascriptIncludeTag('../'+publicPath+'javascripts/external/jquery.min')%> + +- In “route.js”, add **if(map.app.compound.subPublic['UNIQUE_NAME'] === "")** to “root” or "/" routes. + +**If using AngularJS (for other front-end module, do something similar):** + +- In “…_layout.ejs”, add: **** after the title. +- Add **publicRoot** to the routing provider and in the **$rootScope** (in app.run) to make it available in the html files for relative paths as an angular variable. +- Do not use a “/” route in the routing provider, instead set a named route for your default action (ex.: “/default”) and set the “.otherwise” to redirect to that route. + + app.config(['$routeProvider',function($routeProvider ) { + $routeProvider.when('/FILE', { + templateUrl: publicRoot+'PATH_TO_VIEW/FILE.html', + }); + .otherwise( { redirectTo: '/default'}); + }]); + app.run(['$rootScope', '$location', function($rootScope, $location){ + $rootScope.publicRoot = publicRoot; //Make it available to html + }]); + +Even with these modifications, the child application should still be able to run as a standalone. + +Integration in the parent application: +-------------- + +- Copy the whole child project in the parent’s “node_modules”. The name of this module will be noted MODULE_NAME in the following code. +- Create a symbolic link in the parent’s public that points to the child’s public directory. + The name of that symlink will be noted SUBDIR_NAME in the following code. +- Add the module in the parent’s “config/autoload.js”: **require('MODULE_NAME ')**. +- Remove the "server.js" file in the child application (in MODULE_NAME’s root). +- Add a “index.js” file at MODULE_NAME’s root containing: + + exports.init = function(compound) { + //To keep original root + var oldRoot = compound.root; + //Change compound root to current module + compound.root = compound.root+"/node_modules/MODULE_NAME"; + compound.app.root = compound.root; + //Create the sub arrays if they have not been created by another sub-app + if(typeof compound.subRoot === 'undefined'){ + compound.subRoot = []; + compound.subPublic = []; + } + //Change the location of the resource files to the subdirectories + compound.subRoot['UNIQUE_NAME'] = compound.root; + compound.subPublic['UNIQUE_NAME'] = "SUBDIR_NAME/"; + //Load the application in compound + compound.init(compound.root); + //Set back the original root + compound.root = oldRoot; + compound.app.root = oldRoot; + }; + +- Add the parent application in the child’s application controller: **load('application');** and remove the “protectFromForgery”. +- Create a symlink in the child layout to the parent’s included files (ex. menu, header, etc) and include it in the child’s layout : **<% include FILE %>** (delete conflicting ones). +- Add the parent’s stylesheet in the child’s layout. +- Modify the menu in “/app/views/layouts/header.ejs” to add child application’s links. + +**NB:** The child’s controllers are always overridden by the parent’s controllers and might be overridden by other child’s depending on the order they are loaded. Knowing that, you can use that by making “fake” controllers in the child that gets overridden with the parent. +Ex.: The child module can use a fake “authentication_controller” without validation for the standalone, and it will use the parent’s “authentication_controller” when integrated. +You must also be careful to not have modules, controller, models or other elements using the same name; it will either be overwritten or cause an error when starting the server. From 5dc53a2a9df8175d4eb55d03826bc7b1bd107cbb Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 12:02:16 -0500 Subject: [PATCH 02/11] Added the multiple application integration guide --- README.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/README.md b/README.md index 778f1e3..64490c2 100644 --- a/README.md +++ b/README.md @@ -70,6 +70,11 @@ use API methods to configure CompoundJS for your application needs. Let's see how to extend CompoundJS and make your code reusable using the extensions API. +#### [How to have multiple applications in a single application][multiple-app] +This guide presents how to integrate multiple "child" Compound applications in a "parent" application. +After the integration, the child applications can still be used as standalone for easier development. +This guide is divided in two sections: how to prepare the child applications for the integration and how to do the integration in the parent. + [crash-course]: https://github.com/compoundjs/guides/blob/master/basics/crash-course.md [elements-explained]: https://github.com/compoundjs/guides/blob/master/basics/elements-explained.md @@ -86,3 +91,4 @@ API. [extensions-api]: https://github.com/compoundjs/guides/blob/master/advanced/extensions-api.md [deploy]: https://github.com/compoundjs/guides/blob/master/essentials/deploy.md [testing]: https://github.com/compoundjs/guides/blob/master/essentials/testing.md +[multiple-app]: https://github.com/compoundjs/guides/blob/master/advanced/multiple-application-integration.md From 8334d1360880faa3e29ff270f8777fb2ed0fa560 Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 12:02:57 -0500 Subject: [PATCH 03/11] Added the multiple application integration guide --- README.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/README.md b/README.md index 64490c2..69b6cdc 100644 --- a/README.md +++ b/README.md @@ -72,8 +72,6 @@ API. #### [How to have multiple applications in a single application][multiple-app] This guide presents how to integrate multiple "child" Compound applications in a "parent" application. -After the integration, the child applications can still be used as standalone for easier development. -This guide is divided in two sections: how to prepare the child applications for the integration and how to do the integration in the parent. [crash-course]: https://github.com/compoundjs/guides/blob/master/basics/crash-course.md [elements-explained]: https://github.com/compoundjs/guides/blob/master/basics/elements-explained.md From 838fcce03e86d9aa6fcd5db26e1bdcdbd2dcc6a1 Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 12:03:51 -0500 Subject: [PATCH 04/11] Added the multiple application integration guide --- advanced/multiple-application-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/advanced/multiple-application-integration.md b/advanced/multiple-application-integration.md index 6a20c2a..ebac680 100644 --- a/advanced/multiple-application-integration.md +++ b/advanced/multiple-application-integration.md @@ -1,4 +1,4 @@ -How to have multiple applications in a single application +Multiple applications in a single application ============== This guide presents how to integrate multiple "child" Compound applications in a "parent" application. From 2ca8c51e005b123ec335cb30c140ae64c0ea8917 Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 12:04:53 -0500 Subject: [PATCH 05/11] Update multiple-application-integration.md --- advanced/multiple-application-integration.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/advanced/multiple-application-integration.md b/advanced/multiple-application-integration.md index ebac680..f63c520 100644 --- a/advanced/multiple-application-integration.md +++ b/advanced/multiple-application-integration.md @@ -2,7 +2,9 @@ Multiple applications in a single application ============== This guide presents how to integrate multiple "child" Compound applications in a "parent" application. + After the integration, the child applications can still be used as standalone for easier development. + This guide is divided in two sections: how to prepare the child applications for the integration and how to do the integration in the parent. Integration guide @@ -93,5 +95,7 @@ Integration in the parent application: - Modify the menu in “/app/views/layouts/header.ejs” to add child application’s links. **NB:** The child’s controllers are always overridden by the parent’s controllers and might be overridden by other child’s depending on the order they are loaded. Knowing that, you can use that by making “fake” controllers in the child that gets overridden with the parent. + Ex.: The child module can use a fake “authentication_controller” without validation for the standalone, and it will use the parent’s “authentication_controller” when integrated. + You must also be careful to not have modules, controller, models or other elements using the same name; it will either be overwritten or cause an error when starting the server. From 89f64709b55544198c95e35be4ba7c9817f4a1b0 Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 12:05:53 -0500 Subject: [PATCH 06/11] Update multiple-application-integration.md --- advanced/multiple-application-integration.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/advanced/multiple-application-integration.md b/advanced/multiple-application-integration.md index f63c520..3f601ef 100644 --- a/advanced/multiple-application-integration.md +++ b/advanced/multiple-application-integration.md @@ -94,8 +94,7 @@ Integration in the parent application: - Add the parent’s stylesheet in the child’s layout. - Modify the menu in “/app/views/layouts/header.ejs” to add child application’s links. -**NB:** The child’s controllers are always overridden by the parent’s controllers and might be overridden by other child’s depending on the order they are loaded. Knowing that, you can use that by making “fake” controllers in the child that gets overridden with the parent. - +**NB:** The child’s controllers are always overridden by the parent’s controllers and might be overridden by other child’s depending on the order they are loaded. So you can use that by making “fake” controllers in the child that gets overridden with the parent. Ex.: The child module can use a fake “authentication_controller” without validation for the standalone, and it will use the parent’s “authentication_controller” when integrated. You must also be careful to not have modules, controller, models or other elements using the same name; it will either be overwritten or cause an error when starting the server. From cbc987e723775d2e1495a440dc2c2cb95f41310b Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 12:06:09 -0500 Subject: [PATCH 07/11] Update multiple-application-integration.md --- advanced/multiple-application-integration.md | 1 + 1 file changed, 1 insertion(+) diff --git a/advanced/multiple-application-integration.md b/advanced/multiple-application-integration.md index 3f601ef..3314325 100644 --- a/advanced/multiple-application-integration.md +++ b/advanced/multiple-application-integration.md @@ -95,6 +95,7 @@ Integration in the parent application: - Modify the menu in “/app/views/layouts/header.ejs” to add child application’s links. **NB:** The child’s controllers are always overridden by the parent’s controllers and might be overridden by other child’s depending on the order they are loaded. So you can use that by making “fake” controllers in the child that gets overridden with the parent. + Ex.: The child module can use a fake “authentication_controller” without validation for the standalone, and it will use the parent’s “authentication_controller” when integrated. You must also be careful to not have modules, controller, models or other elements using the same name; it will either be overwritten or cause an error when starting the server. From 2f628cb7b87f489d2820d8edcaa09d36f40ca98c Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 12:08:29 -0500 Subject: [PATCH 08/11] Update multiple-application-integration.md --- advanced/multiple-application-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/advanced/multiple-application-integration.md b/advanced/multiple-application-integration.md index 3314325..29e0aa9 100644 --- a/advanced/multiple-application-integration.md +++ b/advanced/multiple-application-integration.md @@ -98,4 +98,4 @@ Integration in the parent application: Ex.: The child module can use a fake “authentication_controller” without validation for the standalone, and it will use the parent’s “authentication_controller” when integrated. -You must also be careful to not have modules, controller, models or other elements using the same name; it will either be overwritten or cause an error when starting the server. +You must also be careful to not have modules, controller, models or other elements using the same name; it will either be overridden or cause an error when starting the server. If some elements need to be used by multiple childs, you can include it in the parent instead, as for the authentication module in the example above. From 4d1077766ba60bb15d06fe3bdb77191fd0ec402b Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 13:39:56 -0500 Subject: [PATCH 09/11] Update multiple-application-integration.md --- advanced/multiple-application-integration.md | 1 + 1 file changed, 1 insertion(+) diff --git a/advanced/multiple-application-integration.md b/advanced/multiple-application-integration.md index 29e0aa9..5529e5c 100644 --- a/advanced/multiple-application-integration.md +++ b/advanced/multiple-application-integration.md @@ -39,6 +39,7 @@ Modifications to the child application before the integration: <%- javascriptIncludeTag('../'+publicPath+'javascripts/external/jquery.min')%> - In “route.js”, add **if(map.app.compound.subPublic['UNIQUE_NAME'] === "")** to “root” or "/" routes. +- To limit the changes, it is highly recommended to split the layout in multiple files, taking the menu out of the layout page and instead include it with **<% include FILE %>**. This will simplify the integration by only modifing the parent's menu instead of every childs. **If using AngularJS (for other front-end module, do something similar):** From fbceba5f86eac4134b7724f64c9f0f69c08a5499 Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Mon, 18 Nov 2013 13:48:06 -0500 Subject: [PATCH 10/11] Update multiple-application-integration.md --- advanced/multiple-application-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/advanced/multiple-application-integration.md b/advanced/multiple-application-integration.md index 5529e5c..95ea23b 100644 --- a/advanced/multiple-application-integration.md +++ b/advanced/multiple-application-integration.md @@ -33,7 +33,7 @@ Modifications to the child application before the integration: - Rename the “application_controller.js” and “application_layout.js” to a unique name. - Change the load('application'); in the controllers to use the new name. - If applicable, change the route to change the “application” route to use the new name. -- In the application controller, add **this.publicPath = compound.subPublic['PRT'];** and change the javascript and style inclusion in the child’s layout. +- In the application controller, add **this.publicPath = compound.subPublic['PRT'];** in a "before" statement and change the javascript and style inclusion in the child’s layout. <%- stylesheetLinkTag('../'+publicPath+'stylesheets/bootstrap')%> <%- javascriptIncludeTag('../'+publicPath+'javascripts/external/jquery.min')%> From 230730f07a14133847ee535cdf2e8ebc15e8d33e Mon Sep 17 00:00:00 2001 From: RaphaelRheault Date: Wed, 20 Nov 2013 15:44:56 -0500 Subject: [PATCH 11/11] Modified the route entry to add generic routes --- advanced/multiple-application-integration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/advanced/multiple-application-integration.md b/advanced/multiple-application-integration.md index 95ea23b..16de820 100644 --- a/advanced/multiple-application-integration.md +++ b/advanced/multiple-application-integration.md @@ -38,7 +38,7 @@ Modifications to the child application before the integration: <%- stylesheetLinkTag('../'+publicPath+'stylesheets/bootstrap')%> <%- javascriptIncludeTag('../'+publicPath+'javascripts/external/jquery.min')%> -- In “route.js”, add **if(map.app.compound.subPublic['UNIQUE_NAME'] === "")** to “root” or "/" routes. +- In “route.js”, add **if(map.app.compound.subPublic['UNIQUE_NAME'] === "")** to “root” or "/" routes and do the same for the generic routes (such as **map.all(':controller/:action/:id')**. - To limit the changes, it is highly recommended to split the layout in multiple files, taking the menu out of the layout page and instead include it with **<% include FILE %>**. This will simplify the integration by only modifing the parent's menu instead of every childs. **If using AngularJS (for other front-end module, do something similar):**