Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mariohernandez/component-based-development

This project includes codebase and curriculum for the component based development workshop.
https://github.com/mariohernandez/component-based-development

drupal8 kss-node twig

Last synced: 3 months ago
JSON representation

This project includes codebase and curriculum for the component based development workshop.

Awesome Lists containing this project

README 

        
# Welcome Component Based Development

A training workshop by [Mediacurrent](https://mediacurrent.com).



## Getting Started

This repo includes everything you need to set up a [Lando-based](https://docs.devwithlando.io/) local Drupal development environment, along with the required front end tools (Node, Pattern Lab, Gulp, etc.). For best results, follow these steps to get your environment setup.



Lando is a free, open source, cross-platform, local development environment tool built on Docker container technology.



### Prerequisites



This is only going to work if you have a fairly new computer. According to the [Lando documentation](https://docs.devwithlando.io/installation/system-requirements.html#operating-system) you will need one of the following:



* macOS 10.10+ \(May need to install command line tools\)

* Windows 10 Pro+ \(or equivalent\) with Hyper-V running

* Linux \(with kernel version 4.x or higher\)



  So far, we have tested only with macOS 10.13 \(High Sierra\) and 10.14 \(Mojave\).



## 1. Install Lando and Docker



Watch the [Step-by-step video tutorial](https://www.dropbox.com/s/pa7mdlung83cdri/cbd-local-setup.mp4?dl=0) to setup your local dev environment.  If you want to do it on your own, follow the steps below.



* [Install Lando and Docker](https://github.com/lando/lando/releases) (Select latest version)



**IMPORTANT**



* **Docker is required**



  Docker makes it possible to build containers for any of the third party integrations required in your environment. If you already have Docker installed you don't need to install it again as part of Lando's installation.



**NOTE**: If you are using macOS, you may need to install XCode's Command Line Tools.



## 2. Clone this repo anywhere in you local system

You can clone or download the repo anywhere in your computer (i.e. Sites, Downloads, Documents, Desktop, etc.).



* In your preferred terminal app, run the following command:


```git clone [email protected]:mariohernandez/component-based-development.git```



* If you experience issues with the command above, try this one:


```git clone https://github.com/mariohernandez/component-based-development.git```



## 3. Build the environment:



1. In your command line type/run `cd component-based-development` 


**NOTE**: _This is the default directory generated by cloning the repo.  If you changed the directory name when cloning the repo, cd into that directory instead_.



    **WINDOWS USERS:**  Use Power Shell to run all commands.



2. Run `lando start`
_This will set up Lando plus pull down Drupal and required contrib modules. This process could take a few minutes to complete, please do not interrupt it.  At the end you will see a list of URLs, hold off on clicking any links for now as this will simply take you to a Drupal install page.  We will install drupal in the next step._



3. Run `lando drush si -y config_installer --account-name=admin --account-pass=admin --db-url='mysql://drupal8:drupal8@database/drupal8'`
_Be sure to run the entire string above as a single command.  This will do a basic installation of Drupal with some basic configuration._



4. Run `cp -r assets/imgs/* web/sites/default/files/`
_This will copy our sample image assets to Drupal's default files directory._



5. Run `lando db-import drupal8.export.gz`
_This will import a custom database that all drupal configuration such as content types, views and sample content._



6. Run `lando drush cr`
_This will clear Drupal's caches._



## 4. Install Front End Tooling



1. Run `cd web/themes/custom/nitflex_dev_theme`



2. Run: `lando npm install`
_This will install the required front end tools (Node, Gulp, etc.)_


**Note**: You may see npm warnings about a missing "repository" or "license" field, as well as a message about vulnerabilities. For our purposes, all of these messages can be ignored, and you _do not_ need to run any of the "audit" commands it suggests.



3. Move into the patternlab directory:  `cd patternlab`



4. Run: `lando composer install`
_This will install PatternLab_


    - When prompted to `update the config option twigAutoescape`, reply with **n**.


    - When prompted that the `path ./../dist/style-guide/ already exists`, reply with **M**.


    - When prompted to `update the config option styleguideKitPath`, reply with **Y**.



5. Run an initial build of the front end tools and PatternLab.


    - First run `cd ../`


    - then run
```lando npm run build && lando php patternlab/core/console --generate```

    - Done!



      **WINDOWS USERS ONLY**:  If you experienced issues with the steps above do the following:



    * Skip step #2

    * Follow all other steps, but change step #5 by running this command istead:

    * `lando php patternlab/core/console --generate`



---



### Preview your site

To see Drupal up and running go to http://nitflex.lndo.site/



Your site's credentials are:  username: `admin`, password: `admin`



You should see Drupal's homepage which includes a list of movies with images, title and other text content.



In some instances, depending on your environment, you may need to append port 8000 to the url (i.e. http://nitflex.lndo.site:8000).



### You are done! 🙌 🔥 👊



---

## Time for exercises

Now that your local environment is set, it's time to build and integrate components.



[Follow the exercises here](https://mariohernandez.gitbook.io/components/) 


This is the curriculum we will follow during training.



## Managing your Lando environment

* To shutdown Lando so it is not consuming your machine's resources run


```lando poweroff```



* To restart lando run
 ```lando restart```



* If you want to rebuild your lando environment run 
```lando rebuild```



* To destroy your environment completely, run 
```lando destroy```



Learn more about [Lando](https://docs.devwithlando.io/).