doxigo/drupal8-new-development-process.md

## drupal8-new-development-process.md

      
    Raw
  

              drupal8-new-development-process.md
            
          
    Getting Started with a Drupal 8 New Website: The Drush Way!


Note: You need to have Composer, Drush, Gulp and a working DrupalConsole installed along with Git & Wget to be able to continue with this guide.

Installing Drupal Console Launcher w/o Composer

curl https://drupalconsole.com/installer -L -o drupal.phar
mv drupal.phar /usr/local/bin/drupal
chmod +x /usr/local/bin/drupal

# Change directory to your drupal installation
cd path/to/drupal.dev
composer global require drupal/console-launcher:~1.0

# Update DrupalConsole if needed
composer update drupal/console --with-dependencies

Note: You must execute the launcher within a drupal site directory or use --root=/path/to/drupal8.dev to specify your drupal site path.

Drupal 8 installation:

composer create-project drupal/core PROJECTNAME

# Creating a database
mysql -u root -p
CREATE DATABASE databasename;

Visit the URL in the browser for the initial setup

Drupal 8 commonly used modules and libraries

# Disabling useless modules
drush pm-uninstall contact tour color help -y

# Enabling main modules and themes
drush en masquerade menu_admin_per_menu components rabbit_hole taxonomy_access_fix amswap block_exclude_pages editor_advanced_link extlink linkit libraries coffee svg_image module_filter metatag statistics admin_toolbar_tools twig_tweak allowed_formats simplify admin_toolbar adminimal_admin_toolbar big_pipe syslog telephone administration_language_negotiation ckeditor_bidi field_group colorbox antibot menu_link_attributes honeypot node_clone paragraphs pathauto rules token views_fieldsets block_class webform -y
# Note that these modules might have their own dependencies that will get downloaded/enabled automatically

# Creating libraries folder and fitvids
mkdir -p libraries/fitvids

# Colorbox library
git clone https://github.com/jackmoore/colorbox.git tempcolorbox && mv tempcolorbox libraries/colorbox && rm -rf tempcolorbox

# Fitvids
wget https://raw.githubusercontent.com/davatron5000/FitVids.js/master/jquery.fitvids.js -P libraries/fitvids

drush en crop entity_browser image_widget_crop fitvids ds_switch_view_mode ds_extras ds webform_ui webform video_embed_media video_embed_field -y

# Download webform libraries
drush webform-libraries-make && drush webform-libraries-download

Defualt base theme


Selected base theme: Radix

drush dl radix --dev && drush en radix -y && drush config-set system.theme default radix -y && drush cc drush && drush radix "milaniztheme" && drush en milaniztheme -y && drush config-set system.theme default milaniztheme -y

# Run npm packages
npm run --prefix themes/milaniztheme setup 

Update proxy in /themes/milaniztheme/config.json

vim themes/milaniztheme/config.json

Press i to get into insert mode and make your changes
Press esc and then :wq to save and quit

Administration theme & Disable default Drupal admin theme: Bartik


Selected administration theme: Mediteran

drush dl mediteran --dev && drush en mediteran -y && drush config-set system.theme admin mediteran -y && drush pm-uninstall bartik seven -y
Enabling drupal development mode


You can just use Drupal Console to enable dev mode but in case you'd prefer to do it manually, here's the list of tasks that should be done

Drupal Console Way

sudo drupal site:mode dev
Manual Way


Ensure the local copy is using a sites/default/settings.local.php, and that it is being included by the sites/default/settings.php file and uncomment the following lines:

if (file_exists($app_root . '/' . $site_path . '/settings.local.php')) {
  include $app_root . '/' . $site_path . '/settings.local.php';
}

Copy example.settings.local.php to  and rename it to settings.local.php

cp sites/example.settings.local.php sites/default/settings.local.php

Uncomment these lines in settings.local.php to disable the render cache and disable dynamic page cache:

$settings['cache']['bins']['render'] = 'cache.backend.null';
$settings['cache']['bins']['page'] = 'cache.backend.null';
$settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null';

Rename default.services.yml to services.yml

cp sites/default/default.services.yml sites/default/services.yml

Change the following settings in services.yml:

# Enable Twig debugging.
parameters:
 twig.config:
   debug: true
   auto_reload: true
   cache: false

Clear the cache by drush cr

Enabling a secondary language and some locale configuration

composer require drupal/console:~1.0 --prefer-dist --optimize-autoloader
drush en locale -y
# drupal locale:language:add <langcode>
drupal locale:language:add fa

Configure administration langauge at admin/config/regional/language/detection
-- Enable Administration language and set the following order:

1. URL
2. Account administration pages
3. Administration language
4. Selected language
5. User
6. Session
7. Browser
Theming tweaks based on Radix

# Copy template files from base Radix theme to the subtheme & creating a front page specific twig file
cp -R themes/radix/templates/* themes/milaniztheme/templates/ && cp themes/milaniztheme/templates/page/page.html.twig themes/milaniztheme/templates/page/page--front.html.twig

Adding sass-ready responsive files to the subtheme, also a custom base/_typography.scss file that is already font-facing some commonly used Persian fonts, a base/_mixins.scss file and a little bit of customized base/_variables.scss that contains some general configuration

# Overwrite existing files
cd themes/milaniztheme/ && git clone https://github.com/doxigo/sassy-d8.git temp && cp -R temp/* . && rm -rf temp && drush cr


You may find the respected repository here:
Drupal-8 Radix Stuff


Paste the following code to add newly added sass files to the main SCSS file milaniztheme.style.scss


echo '
@import "styles";
@import "responsive/widescreen";
@import "responsive/desktop";
@import "responsive/tablet";
@import "responsive/mobile";
' >> assets/scss/milaniztheme.style.scss
Gulp


Build npm packages using Gulp in the theme directory

gulp