J4.x

Setting Up Your Local Environment/sw: Difference between revisions

From Joomla! Documentation

Created page with "Inategemea na mfumo wako wa mwendesho ni vipi utafanya ili uweze kurekebisha mazingira yako ya maendeleo. Hatuwezi kuandika mwongozo kwa kila aina ya mfumo. Kwa hivyo unapaswa..."
FuzzyBot (talk | contribs)
Updating to match new version of source page
 
(35 intermediate revisions by 2 users not shown)
Line 4: Line 4:
<noinclude>{{Joomla version|version=4.x}}</noinclude>
<noinclude>{{Joomla version|version=4.x}}</noinclude>
{{-}}
{{-}}
Kuanzia Joomla 4, tumebadilisha maendesho ya maendeleo. Haitawezekana tena kudupliketi yaliohifadhiwa na kuwa na usakinishaji wa Joomla iliyo tayari kwa kutmia. Tunafuata mfano mzuri na tumefahamisha maendesho ya kujenga CMS.
<span class="mw-translate-fuzzy">Kuanzia Joomla 4, tumebadilisha maendesho ya maendeleo. Haitawezekana tena kudupliketi yaliohifadhiwa na kuwa na usakinishaji wa Joomla iliyo tayari kwa kutmia. Tunafuata mfano mzuri na tumefahamisha maendesho ya kujenga CMS.</span>


==Mwongozo wa kuanzisha haraka==
==Mwongozo wa kuanzisha haraka==
Inategemea na mfumo wako wa mwendesho ni vipi utafanya ili uweze kurekebisha mazingira yako ya maendeleo. Hatuwezi kuandika mwongozo kwa kila aina ya mfumo. Kwa hivyo unapaswa kuuliza mashini ya kutafuta kwa kupata maelezo unayohitaji.  
<span class="mw-translate-fuzzy">Inategemea na mfumo wako wa mwendesho ni vipi utafanya ili uweze kurekebisha mazingira yako ya maendeleo. Hatuwezi kuandika mwongozo kwa kila aina ya mfumo. Kwa hivyo unapaswa kuuliza mashini ya kutafuta kwa kupata maelezo unayohitaji.</span>


=== Tools you need ===
=== Zana unazohitaji ===
# PHP - basically the same as you need for running a Joomla Site, but you need the PHP CLI (command line interface) Version (see the [[S:MyLanguage/Configuring_a_LAMPP_server_for_PHP_development|Configuring a LAMPP server for PHP development]] page)
# PHP - kwa kimsingi hii ni sawa na ya kuendesha tovuti ya Joomla, lakni unahitaji toleo la PHP CLI (command line interface) - angalia kurasa ya [[S:MyLanguage/Configuring_a_LAMPP_server_for_PHP_development|Kusanidi seva ya LAMPP kwa maendeleo ya PHP]]
# Composer - for managing Joomla's PHP Dependencies - for help installing Composer read the documentation at https://getcomposer.org/doc/00-intro.md
# Composer - kwa kusimamia mategemezi ya PHP ya Joomla - kwa usaidizi wa kusakinisha Composer, soma mwongozo katika https://getcomposer.org/doc/00-intro.md
# Node.js - for compiling Joomla's JavaScript and SASS files - for help installing Node.js please follow the instructions available on https://nodejs.org/en/
# <span class="mw-translate-fuzzy">Node.js - kwa kukusanya mafaili ya Joomla ya JavaScript na SASS - kwa usaidizi wa kusakinisha Node.js, tafadhali fuata maelezo yanayopatikana kwa https://nodejs.org/en/</span>
# Git - for version management
# Git - kwa kusimamia matoleo


=== Steps to setup the local environment ===
<div class="mw-translate-fuzzy">
# Clone the repository
=== Hatua za kurekebisha mazingira ya kienyeji ===
# run <tt>composer install</tt> from the root of the git repo (you can add --ignore-platform-reqs if you don't have the PHP-LDAP locally installed and you don't need it)
</div>
# run <tt>npm install</tt> from the root of the git repo
# <span class="mw-translate-fuzzy">Dupliketi yaliohifadhiwa</span>
# Checkout the branch of the latest release (currently ''4.4-dev'').
# <span class="mw-translate-fuzzy">Anzisha <tt>composer install</tt> kutoka kwa enzi ya hifadhi ya Git (unaweza kuongeza --ignore-platform-reqs ikiwa hauna PHP-LDAP iliyosakinishwa kwa kienyeji na hauihitaji)</span>
# <span class="mw-translate-fuzzy">Anzisha <tt>npm install</tt> kutoka kwa enzi ya hifadhi ya Git</span>
Linux and OSX users can set up the following bash alias by placing the following inside the ''~/.bashrc file'':


== The a bit longer start guide ==
<syntaxhighlight lang="bash">
Joomla is not different to many other web tools these days. It has a large PHP part and it has more and more JavaScript code. While PHP coding doesn't need so much preparation, JavaScript needs a lot tooling around. The main reason is that nobody writes code in a way that every browser understands, so the code needs transpiling from e.g. ES6 to a compatible version of JavaScript. The same is true for CSS, for Joomla we are using SASS and this will be converted to native CSS so that any browser understands it. As downside setting up a dev environment is a bit more complicated but the tooling make coding also more convenient. Thanks to watchers and browser auto reload you can see your change in real time.  
alias jclean="rm -rf administrator/templates/atum/css; \
rm -rf templates/cassiopeia/css; \
rm -rf administrator/templates/system/css; \
rm -rf templates/system/css; \
rm -rf media/; \
rm -rf node_modules/; \
rm -rf libraries/vendor/; \
rm -f administrator/cache/autoload_psr4.php; \
rm -rf installation/template/css"
alias jinstall="jclean; composer install; npm ci"
</syntaxhighlight>
 
This will delete all the compiled files in your system and run a fresh install as one command by calling <tt>jinstall</tt> inside your Joomla install. You can also use the <tt>jclean</tt> command to swap back to a Joomla 3.x branch
 
 
== Mwongozo mrefu kidogo wa kuanzisha ==
<span class="mw-translate-fuzzy">Siku hizi Joomla si tofauti na zana zingine za wovuti. Iko na sehemu kubwa ya PHP, na ina zaidi sana kodi ya JavaScript. Matumizi ya PHP haihitaji marekebisho mengi, isipokuwa JavaScript inataka uchezenayo sana. Sababu kubwa ni hakuna mtu anaeandika kodi ambayo inajulikana na visakuzi vyote. Kwa hivyo, kodi nilazima itafsiriwe kwa mfano kutoka kwa ES6 kwa toleo litakaloingiliana na JavaScript. Na kweli ni sawa na CSS - kwa Joomla tunatumia SASS, na hii itageuzwa kwa CSS ya asili, ili iweze kujulikana kwa kila kisakuzi. Majuto ni matayarisho ya mazingira ya maendeleo yatakuwa ni magumu, lakini mazana yatarahisisha kuandika kodi. Kwa mfano ni vizuri kuna uboreshaji wa kisakuzi na kuweza kuona mabadiliko yako wakati huo.</span>


=== PHP ===
=== PHP ===
It should be enough to run <tt>composer install</tt> as this will install PHP dependencies saved in the composer.lock file. You can do this as many times as you like, it will only install new packages when the composer.lock file is changed. Don't run <tt>composer update</tt> as this will update all packages to newer versions and update the composer.lock file.
It should be enough to run <tt>composer install</tt> as this will install PHP dependencies saved in the ''composer.lock'' file. You can do this as many times as you like. It will only install new packages when the ''composer.lock'' file is changed. Don't run <tt>composer update</tt> as this will update all packages to newer versions and update the ''composer.lock'' file.
 
'''Note:''' You may need to run <tt>composer install</tt> with the <tt>--ignore-platform-reqs</tt> option to ignore platform requirements specified in Composer. That is, if you do not have PHP's LDAP extension installed.


Note: You may need to run <tt>composer install</tt> with the <tt>--ignore-platform-reqs</tt> option to ignore platform requirements specified in Composer, i.e. if you do not have PHP's LDAP extension installed.
=== Node/npm Scripts ===


=== Node/npm scripts ===
Node.js comes with a package manager called NPM (in some ways the same as Composer). NPM has a <tt>run</tt> command and we have prepared some scripts to make your life easier. You have to run the commands for the root of the repository when you have changed JS or SASS files. Previously you needed to run <tt>npm ci</tt> once, to install dependencies.
Node.js comes with a package manager called NPM (in some way the same as Composer). NPM has a <tt>run</tt> command and we have prepared some scripts to make your life easier. You have to run the commands for the root of the repository.


==== npm run build:css ====
==== npm run build:css ====
<noinclude>It will compile SASS files to CSS and also create the minified files.</noinclude>
It will compile SASS files to CSS and also create the minified files.


==== npm run build:js ====
==== npm run build:js ====
It will compile and transpile the JavaScript files to the correct format and create minified files
It will compile and transpile the JavaScript files to the correct format and create minified files.


==== npm run watch:css ====
==== npm run watch ====
This is the same as the <tt>build:css</tt> command but will watch for changes and automatically build updated files.
This is the same as the <tt>build:js</tt> command but will watch for changes and automatically build updated files in the media directory. SASS files are not included yet.
 
==== npm run watch:js ====
This is the same as the <tt>build:js</tt> command but will watch for changes and automatically build updated files.


==== npm run lint:js ====
==== npm run lint:js ====
This will make a syntax check on JavaScript files.
This will perform a syntax check on all ES6 JavaScript files against the JavaScript code standard (for more information on the Joomla 4 codestyle standard please read the the coding standards manual at [https://developer.joomla.org/coding-standards/introduction.html| the coding standards manual].


==== npm run test ====
==== npm run test ====
This will run other JavaScript testing suite.
This will run a JavaScript testing suite.
 
==Possible Issues==
When running composer install you can run into these errors
 
<syntaxhighlight lang="bash">
Problem 1
    - Installation request for joomla/ldap 2.0.0-beta -> satisfiable by joomla/ldap[2.0.0-beta].
    - joomla/ldap 2.0.0-beta requires ext-ldap * -> the requested PHP extension ldap is missing from your system.
Problem 2
    - Installation request for symfony/ldap v5.1.5 -> satisfiable by symfony/ldap[v5.1.5].
    - symfony/ldap v5.1.5 requires ext-ldap * -> the requested PHP extension ldap is missing from your system.
</syntaxhighlight>
 
The solution is to run the composer install with the <tt>--ignore-platform-reqs</tt> option to ignore platform requirements specified in Composer. That is, if you do not have PHP's LDAP extension installed.
 
<syntaxhighlight lang="bash">composer install --ignore-platform-reqs</syntaxhighlight>
 
If you receive a login error such as shown below, delete the <tt>administrator/cache/autoload_psr4.php</tt> file.
 
[[File:Install-error.png|border|center|400px|Login After Install Error]]


<noinclude>
<noinclude>

Latest revision as of 15:39, 20 April 2024

Tutorial
Ni vipi kutayarisha mazingira ya kienyeji kwa Joomla 4
Joomla! 
4.x

Kuanzia Joomla 4, tumebadilisha maendesho ya maendeleo. Haitawezekana tena kudupliketi yaliohifadhiwa na kuwa na usakinishaji wa Joomla iliyo tayari kwa kutmia. Tunafuata mfano mzuri na tumefahamisha maendesho ya kujenga CMS.

Mwongozo wa kuanzisha haraka

Inategemea na mfumo wako wa mwendesho ni vipi utafanya ili uweze kurekebisha mazingira yako ya maendeleo. Hatuwezi kuandika mwongozo kwa kila aina ya mfumo. Kwa hivyo unapaswa kuuliza mashini ya kutafuta kwa kupata maelezo unayohitaji.

Zana unazohitaji

  1. PHP - kwa kimsingi hii ni sawa na ya kuendesha tovuti ya Joomla, lakni unahitaji toleo la PHP CLI (command line interface) - angalia kurasa ya Kusanidi seva ya LAMPP kwa maendeleo ya PHP
  2. Composer - kwa kusimamia mategemezi ya PHP ya Joomla - kwa usaidizi wa kusakinisha Composer, soma mwongozo katika https://getcomposer.org/doc/00-intro.md
  3. Node.js - kwa kukusanya mafaili ya Joomla ya JavaScript na SASS - kwa usaidizi wa kusakinisha Node.js, tafadhali fuata maelezo yanayopatikana kwa https://nodejs.org/en/
  4. Git - kwa kusimamia matoleo

Hatua za kurekebisha mazingira ya kienyeji

  1. Dupliketi yaliohifadhiwa
  2. Checkout the branch of the latest release (currently 4.4-dev).
  3. Anzisha composer install kutoka kwa enzi ya hifadhi ya Git (unaweza kuongeza --ignore-platform-reqs ikiwa hauna PHP-LDAP iliyosakinishwa kwa kienyeji na hauihitaji)
  4. Anzisha npm install kutoka kwa enzi ya hifadhi ya Git

Linux and OSX users can set up the following bash alias by placing the following inside the ~/.bashrc file:

alias jclean="rm -rf administrator/templates/atum/css; \
rm -rf templates/cassiopeia/css; \
rm -rf administrator/templates/system/css; \
rm -rf templates/system/css; \
rm -rf media/; \
rm -rf node_modules/; \
rm -rf libraries/vendor/; \
rm -f administrator/cache/autoload_psr4.php; \
rm -rf installation/template/css"
alias jinstall="jclean; composer install; npm ci"

This will delete all the compiled files in your system and run a fresh install as one command by calling jinstall inside your Joomla install. You can also use the jclean command to swap back to a Joomla 3.x branch


Mwongozo mrefu kidogo wa kuanzisha

Siku hizi Joomla si tofauti na zana zingine za wovuti. Iko na sehemu kubwa ya PHP, na ina zaidi sana kodi ya JavaScript. Matumizi ya PHP haihitaji marekebisho mengi, isipokuwa JavaScript inataka uchezenayo sana. Sababu kubwa ni hakuna mtu anaeandika kodi ambayo inajulikana na visakuzi vyote. Kwa hivyo, kodi nilazima itafsiriwe kwa mfano kutoka kwa ES6 kwa toleo litakaloingiliana na JavaScript. Na kweli ni sawa na CSS - kwa Joomla tunatumia SASS, na hii itageuzwa kwa CSS ya asili, ili iweze kujulikana kwa kila kisakuzi. Majuto ni matayarisho ya mazingira ya maendeleo yatakuwa ni magumu, lakini mazana yatarahisisha kuandika kodi. Kwa mfano ni vizuri kuna uboreshaji wa kisakuzi na kuweza kuona mabadiliko yako wakati huo.

PHP

It should be enough to run composer install as this will install PHP dependencies saved in the composer.lock file. You can do this as many times as you like. It will only install new packages when the composer.lock file is changed. Don't run composer update as this will update all packages to newer versions and update the composer.lock file.

Note: You may need to run composer install with the --ignore-platform-reqs option to ignore platform requirements specified in Composer. That is, if you do not have PHP's LDAP extension installed.

Node/npm Scripts

Node.js comes with a package manager called NPM (in some ways the same as Composer). NPM has a run command and we have prepared some scripts to make your life easier. You have to run the commands for the root of the repository when you have changed JS or SASS files. Previously you needed to run npm ci once, to install dependencies.

npm run build:css

It will compile SASS files to CSS and also create the minified files.

npm run build:js

It will compile and transpile the JavaScript files to the correct format and create minified files.

npm run watch

This is the same as the build:js command but will watch for changes and automatically build updated files in the media directory. SASS files are not included yet.

npm run lint:js

This will perform a syntax check on all ES6 JavaScript files against the JavaScript code standard (for more information on the Joomla 4 codestyle standard please read the the coding standards manual at the coding standards manual.

npm run test

This will run a JavaScript testing suite.

Possible Issues

When running composer install you can run into these errors

Problem 1
    - Installation request for joomla/ldap 2.0.0-beta -> satisfiable by joomla/ldap[2.0.0-beta].
    - joomla/ldap 2.0.0-beta requires ext-ldap * -> the requested PHP extension ldap is missing from your system.
Problem 2
    - Installation request for symfony/ldap v5.1.5 -> satisfiable by symfony/ldap[v5.1.5].
    - symfony/ldap v5.1.5 requires ext-ldap * -> the requested PHP extension ldap is missing from your system.

The solution is to run the composer install with the --ignore-platform-reqs option to ignore platform requirements specified in Composer. That is, if you do not have PHP's LDAP extension installed.

composer install --ignore-platform-reqs

If you receive a login error such as shown below, delete the administrator/cache/autoload_psr4.php file.

Login After Install Error
Login After Install Error