You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{{ message }}
This repository was archived by the owner on Aug 4, 2023. It is now read-only.
Copy file name to clipboardExpand all lines: resources/packaging-for-multiple-properties.md
+19-19
Original file line number
Diff line number
Diff line change
@@ -8,16 +8,16 @@ description: >-
8
8
9
9
## Sharing Across Multiple Projects
10
10
11
-
Emulsify allows you to use shared packages across multiple projects. If you are a large organization, this is an excellent way to provide consistency, reuse and save time/money across all properties. The first step is to make some decisions around how you want to organize your organization and projects. Emulsify is not opinionated on this, as organizations will operate in a multitude of ways. We will use one common way as an example to show how it can be set up.
11
+
Emulsify allows you to use shared packages across multiple projects. If you are a large organization, this is an excellent way to provide consistency, reuse and save time/money across all properties. The first step is to make some decisions around how you want to organize your organization and projects. Emulsify is not opinionated on this, as organizations will operate in a multitude of ways. We will use one common way as an example to show how it can be set up. 
12
12
13
-
One common way to package components and styles is to have one package for components \(for a given language\) and one package for shared styling. That way, you can share styling across multiple languages and components per language to any relevant project. So, here's an imaginary set of packages:
13
+
One common way to package components and styles is to have one package for components (for a given language) and one package for shared styling. That way, you can share styling across multiple languages and components per language to any relevant project. So, here's an imaginary set of packages:
14
14
15
-
* Styles \(Sass\)`global-sass`
16
-
* Components \(Twig\)`global-twig`
17
-
* Drupal Project A \(Organization\)
18
-
* Drupal Project B \(Property\)
15
+
* Styles (Sass) `global-sass`
16
+
* Components (Twig) `global-twig`
17
+
* Drupal Project A (Organization)
18
+
* Drupal Project B (Property)
19
19
20
-
The organization's Drupal project \(A\) and one of the properties of the organization \(B\) can both share the components and styling across their projects. Once those packages have been set up, installing them in each project using Emulsify Drupal is as follows:
20
+
The organization's Drupal project (A) and one of the properties of the organization (B) can both share the components and styling across their projects. Once those packages have been set up, installing them in each project using Emulsify Drupal is as follows:
21
21
22
22
#### Install Packages
23
23
@@ -29,15 +29,15 @@ $ npm i global-sass global-twig
29
29
30
30
In Emulsify Drupal, you will want to tell Webpack where to compile your new files. Let's start with the styles. We already have a Sass pipeline in place, so importing styling from a package is as simple as putting this into `components/style.scss`:
31
31
32
-
```text
32
+
```
33
33
@import '~global-sass/style';
34
34
```
35
35
36
-
Assuming you have a Sass stylesheet named `style.css` that compiles all the styles from your global-sass directory, this import will automatically pull in all of those styles. See our Western University [project](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/components/style.scss) and [sass project's style.css](https://github.com/emulsify-ds/western-up-scss/blob/master/style.scss) for an example of this.
36
+
Assuming you have a Sass stylesheet named `style.css` that compiles all the styles from your global-sass directory, this import will automatically pull in all of those styles. See our Western University [project](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/components/style.scss) and [sass project's style.css](https://github.com/emulsify-ds/western-up-scss/blob/master/style.scss) for an example of this. 
37
37
38
38
#### Twig/Markup - Storybook
39
39
40
-
Next, we need to tell Storybook and Drupal where to find the component Twig files. First let's start with Storybook. Storybook uses Webpack to load files, and since our Twig components are Node packages, we need to tell Webpack a few things \(see links for Western University examples of how to do this\): 1. [How to watch/compile for changes in these files](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/.storybook/webpack.config.js#L7-L18), 2. [Where to look for these files](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/.storybook/webpack.config.js#L29-L43), and 3. [To include those in our linting](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/.storybook/webpack.config.js#L94-L95). Let's walk through a couple of places in this file that may be confusing - see comments in file for clarification:
40
+
Next, we need to tell Storybook and Drupal where to find the component Twig files. First let's start with Storybook. Storybook uses Webpack to load files, and since our Twig components are Node packages, we need to tell Webpack a few things (see links for Western University examples of how to do this): 1. [How to watch/compile for changes in these files](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/.storybook/webpack.config.js#L7-L18), 2. [Where to look for these files](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/.storybook/webpack.config.js#L29-L43), and 3. [To include those in our linting](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/.storybook/webpack.config.js#L94-L95). Let's walk through a couple of places in this file that may be confusing - see comments in file for clarification:
41
41
42
42
```javascript
43
43
// In the case of using yarn/npm link to link and develop your packages locally, this will help.
#### Organization vs. Property \(Global vs. local\)
59
+
#### Organization vs. Property (Global vs. local)
60
60
61
-
Also, you may have noticed we're only using global components in this project \(the atoms/molecules/etc. in the `twig-loader` namespaces are all from our global package\). This is helpful when working on a global project like a main organization project. If you need some global and local, like on a property, you can use something like in the [Western School of Arts project](https://github.com/emulsify-ds/westernarts/blob/master/web/themes/custom/western_arts/.storybook/webpack.config.js#L43-L77). Notice there are now namespaces for both global \(e.g., `atoms`\) and local \(e.g., `wa_atoms`\). Now you can use things like this in your Twig:
61
+
Also, you may have noticed we're only using global components in this project (the atoms/molecules/etc. in the `twig-loader` namespaces are all from our global package). This is helpful when working on a global project like a main organization project. If you need some global and local, like on a property, you can use something like in the [Western School of Arts project](https://github.com/emulsify-ds/westernarts/blob/master/web/themes/custom/western\_arts/.storybook/webpack.config.js#L43-L77). Notice there are now namespaces for both global (e.g., `atoms`) and local (e.g., `wa_atoms`). Now you can use things like this in your Twig:
62
62
63
-
```text
63
+
```
64
+
{% raw %}
64
65
{% include "@atoms/global/button.twig" %}
65
66
{% include "@wa_atoms/local/button.twig %}
67
+
{% endraw %}
66
68
```
67
69
68
70
#### Organization Workflow
69
71
70
-
If you are working on a property like this, you should be good to go. Changes to your local files will hot reload automatically and you will be able to leverage global components/styles. One last note is needed here when you are working on the organization \(parent or global\) project. You will want to work on the global components and styles within their respective packages while also gaining hot reloading. There are a number of approaches for this, but we have had great success with the simple usage of `npm/yarn link`. We use `yarn` so I will show an example using that. You will clone down your projects separately \(`global-sass` ,`global-twig`\). In each, you will want to run:
72
+
If you are working on a property like this, you should be good to go. Changes to your local files will hot reload automatically and you will be able to leverage global components/styles. One last note is needed here when you are working on the organization (parent or global) project. You will want to work on the global components and styles within their respective packages while also gaining hot reloading. There are a number of approaches for this, but we have had great success with the simple usage of `npm/yarn link`. We use `yarn` so I will show an example using that. You will clone down your projects separately (`global-sass` ,`global-twig`). In each, you will want to run:
71
73
72
-
```text
74
+
```
73
75
yarn link
74
76
```
75
77
76
78
Once you've done that, you need to now link them in your Drupal project. Go to your theme, and run:
77
79
78
-
```text
80
+
```
79
81
yarn link global-sass
80
82
yarn link global-twig
81
83
```
@@ -84,9 +86,7 @@ Now, your project will use your local versions of those packages, and with the c
84
86
85
87
#### Drupal Twig
86
88
87
-
One last note on the Drupal side: you will also want your theme's `*.info.yml` file to mimic any namespaces you have in Webpack for Storybook. Here's [the example from Western University](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/western_up.info.yml#L46-L58). And of course, for these paths to work, you will have to make sure your continuous integration process produces the `node_modules` directory with your packages.
88
-
89
-
89
+
One last note on the Drupal side: you will also want your theme's `*.info.yml` file to mimic any namespaces you have in Webpack for Storybook. Here's [the example from Western University](https://github.com/emulsify-ds/westernuni/blob/master/web/themes/custom/western-up/western\_up.info.yml#L46-L58). And of course, for these paths to work, you will have to make sure your continuous integration process produces the `node_modules` directory with your packages.
0 commit comments