diff --git a/Documentation/QuickStart/Images/Backend/Dashboard.png b/Documentation/QuickStart/Images/Backend/Dashboard.png new file mode 100644 index 000000000..7cae6f5f3 Binary files /dev/null and b/Documentation/QuickStart/Images/Backend/Dashboard.png differ diff --git a/Documentation/QuickStart/Images/Backend/Login.png b/Documentation/QuickStart/Images/Backend/Login.png new file mode 100644 index 000000000..f046da858 Binary files /dev/null and b/Documentation/QuickStart/Images/Backend/Login.png differ diff --git a/Documentation/QuickStart/Images/Backend/TemplateModule.png b/Documentation/QuickStart/Images/Backend/TemplateModule.png new file mode 100644 index 000000000..73569765f Binary files /dev/null and b/Documentation/QuickStart/Images/Backend/TemplateModule.png differ diff --git a/Documentation/QuickStart/Images/Setup/Step1.png b/Documentation/QuickStart/Images/Setup/Step1.png new file mode 100644 index 000000000..49c3882c0 Binary files /dev/null and b/Documentation/QuickStart/Images/Setup/Step1.png differ diff --git a/Documentation/QuickStart/Images/Setup/Step4.png b/Documentation/QuickStart/Images/Setup/Step4.png new file mode 100644 index 000000000..88e3e50a0 Binary files /dev/null and b/Documentation/QuickStart/Images/Setup/Step4.png differ diff --git a/Documentation/QuickStart/Images/Setup/Step5.png b/Documentation/QuickStart/Images/Setup/Step5.png new file mode 100644 index 000000000..83fb5f579 Binary files /dev/null and b/Documentation/QuickStart/Images/Setup/Step5.png differ diff --git a/Documentation/QuickStart/Images/Template/ButtonSave.png b/Documentation/QuickStart/Images/Template/ButtonSave.png new file mode 100644 index 000000000..f337d6e47 Binary files /dev/null and b/Documentation/QuickStart/Images/Template/ButtonSave.png differ diff --git a/Documentation/QuickStart/Images/Template/General.png b/Documentation/QuickStart/Images/Template/General.png new file mode 100644 index 000000000..09fa17e2a Binary files /dev/null and b/Documentation/QuickStart/Images/Template/General.png differ diff --git a/Documentation/QuickStart/Images/Template/Includes.png b/Documentation/QuickStart/Images/Template/Includes.png new file mode 100644 index 000000000..bf55db249 Binary files /dev/null and b/Documentation/QuickStart/Images/Template/Includes.png differ diff --git a/Documentation/QuickStart/Images/Template/InfoModify.png b/Documentation/QuickStart/Images/Template/InfoModify.png new file mode 100644 index 000000000..0fe114e60 Binary files /dev/null and b/Documentation/QuickStart/Images/Template/InfoModify.png differ diff --git a/Documentation/QuickStart/Images/Template/Options.png b/Documentation/QuickStart/Images/Template/Options.png new file mode 100644 index 000000000..ab85bafa6 Binary files /dev/null and b/Documentation/QuickStart/Images/Template/Options.png differ diff --git a/Documentation/QuickStart/Images/Template/SelectAction.png b/Documentation/QuickStart/Images/Template/SelectAction.png new file mode 100644 index 000000000..4810db434 Binary files /dev/null and b/Documentation/QuickStart/Images/Template/SelectAction.png differ diff --git a/Documentation/QuickStart/Index.rst b/Documentation/QuickStart/Index.rst new file mode 100644 index 000000000..1224cab9d --- /dev/null +++ b/Documentation/QuickStart/Index.rst @@ -0,0 +1,43 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../Includes.txt + + +======================== +Quick Start from Scratch +======================== + +This guide explains to setup your new TYPO3 project with Bootstrap Package and a +Sitepackage from scratch with the help of DDEV Local on your local computer. +Once you have finished you can deploy it to a hoster of your choice. + + +System Requirements +=================== + +Make sure you have the following components installed before you continue: + +* `DDEV Local and Docker `_ +* `Git `_ or similar software configuration management, + Git is required on Windows to successfuly run DDEV and used as reference in + this guide +* Editor of your choice like `Visual Studio Code `_ + or `PhpStorm `_ + +Once you have successfuly installed the previous mentioned components your +project will be setup and ready to use within minutes. + + +Overview +======== + +.. toctree:: + :maxdepth: 5 + :titlesonly: + :glob: + + Preparation/Index + Sitepackage/Index diff --git a/Documentation/QuickStart/Page.rst b/Documentation/QuickStart/Page.rst new file mode 100644 index 000000000..e67f32935 --- /dev/null +++ b/Documentation/QuickStart/Page.rst @@ -0,0 +1,118 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../Includes.txt + + +===================== +Add Pages and Content +===================== + + +Login to the Backend +==================== + +.. figure:: ../Images/Backend/Login.png + :width: 200px + :alt: TYPO3 Backend Login + :class: with-border + +Enter your choosen credentials here and login to the +TYPO3 backend. + + +The Dashboard +------------- + +.. figure:: ../Images/Backend/Dashboard.png + :width: 800px + :alt: TYPO3 Dashboard + :class: with-shadow + +After the successful login you will be redirected to the TYPO3 Dashboard. + + +Edit the TypoScript Template +============================ + +On the left side choose the **Template module**. + +.. figure:: ../Images/Backend/TemplateModule.png + :width: 800px + :alt: TYPO3 Backend Login + :class: with-shadow + +Here you select the existing template **Main TypoScript Rendering** on the +page **Home**. + +On the top select :button:`Info/Modify` + +.. figure:: ../Images/Template/SelectAction.png + :alt: Select Template Action + :class: with-border + +and click to :button:`Edit the whole template record`. + +.. figure:: ../Images/Template/InfoModify.png + :width: 800px + :alt: Edit Template + :class: with-border + + +General +------- + +On the tab **General** remove the default content of the **Setup** field. You +are free to change here also the **Template Title**. + +.. figure:: ../Images/Template/General.png + :width: 800px + :alt: General Tab + :class: with-border + + +Options +------- + +On the tab **Options** change the settings according to this listing and the +following image: + +* Check **Clear Constants** +* Check **Clear Setup** +* Activate **Rootlevel** + +.. figure:: ../Images/Template/Options.png + :width: 800px + :alt: Options Tab + :class: with-border + + +Includes +-------- + +On the tab **Includes** change the settings according to this listing and the +following image: + +* Remove all **Include static (from extensions)** items +* Add your **Sitepackage** to **Include static (from extensions)** +* For **Static Template Files from TYPO3 Extensions** select + **Include before all static templates if root flag is set** + +.. figure:: ../Images/Template/Includes.png + :width: 800px + :alt: Options Tab + :class: with-border + + +Save and Close the Template +--------------------------- + +On the top click to **Save**: + +.. figure:: ../Images/Template/ButtonSave.png + :alt: Save Button + :class: with-border + +The template is now fully setup and you can close it. diff --git a/Documentation/QuickStart/Preparation/Composer.rst b/Documentation/QuickStart/Preparation/Composer.rst new file mode 100644 index 000000000..7e500b99d --- /dev/null +++ b/Documentation/QuickStart/Preparation/Composer.rst @@ -0,0 +1,70 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../../Includes.txt + + +================== +Configure Composer +================== + + +TYPO3 Core Extensions +===================== + +Now it's time to tell Composer which packages and TYPO3 extensions you like to +install and setup. For a initial setup run the following commands: + +.. code-block:: bash + + ddev composer create "typo3/cms-base-distribution:^10" --no-install + ddev start + ddev composer config repositories.local path "packages/*" + ddev composer require "my-company/mysitepackage:@dev" --no-update + +This will setup your TYPO3 project with a default set of core extensions and +the previously created **Sitepackage**, remember to replace the +**vendor/package**. + + +TYPO3 Secure Web (optional) +=========================== + +To increase the security of your project you can simply use the +:composer:`helhum/typo3-secure-web` package. + +.. code-block:: bash + + ddev composer config extra.typo3/cms.root-dir private + ddev composer config extra.typo3/cms.web-dir public + ddev exec mkdir -p private/typo3conf + ddev exec ln -rs public/typo3conf/AdditionalConfiguration.php private/typo3conf/AdditionalConfiguration.php + ddev composer require "helhum/typo3-secure-web" --no-update + +More information can be found at the `TYPO3 Secure Web Github Repository `_ + + +Additional TYPO3 (Core) Extensions +================================== + +You are free to add more packages, for core extensions head to the +`Composer Helper `_ and select the +desired packages, extensions can be found at the +`TYPO3 Extension Repository `_. Make sure you +always add the :composer:`--no-update` option to avoid version conflicts +later. + + +Install the Packages +==================== + +Once you have finished adding more packages run the following command to start +the installation process: + +.. code-block:: bash + + ddev composer install + +Your project is now installed and ready to setup. diff --git a/Documentation/QuickStart/Preparation/Ddev.rst b/Documentation/QuickStart/Preparation/Ddev.rst new file mode 100644 index 000000000..bfd636588 --- /dev/null +++ b/Documentation/QuickStart/Preparation/Ddev.rst @@ -0,0 +1,20 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../../Includes.txt + + +==================== +Configure DDEV Local +==================== + +Head to your newly created project folder with your favorite shell or the +integrated shell of your editor and run the following command to setup DDEV: + +.. code-block:: bash + + ddev config --project-type=typo3 --docroot=public --create-docroot=true + +DDEV Local is now setup and ready to use. diff --git a/Documentation/QuickStart/Preparation/Git.rst b/Documentation/QuickStart/Preparation/Git.rst new file mode 100644 index 000000000..89097fc3d --- /dev/null +++ b/Documentation/QuickStart/Preparation/Git.rst @@ -0,0 +1,18 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../../Includes.txt + + +============================================== +Initialize the local Git Repository (optional) +============================================== + +[Add introduction]. + +.. code-block:: bash + + git init + diff --git a/Documentation/QuickStart/Preparation/Index.rst b/Documentation/QuickStart/Preparation/Index.rst new file mode 100644 index 000000000..4f378ac75 --- /dev/null +++ b/Documentation/QuickStart/Preparation/Index.rst @@ -0,0 +1,31 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../../Includes.txt + + +=========== +Preparation +=========== + +Before you can start working on your new project some preparation steps are +required. + + +Overview +======== + +.. toctree:: + :maxdepth: 5 + :titlesonly: + :glob: + + ProjectFolder + Sitepackage + Ddev + Composer + InstallWizard + Git + Template diff --git a/Documentation/QuickStart/Preparation/InstallWizard.rst b/Documentation/QuickStart/Preparation/InstallWizard.rst new file mode 100644 index 000000000..a9f78fe4a --- /dev/null +++ b/Documentation/QuickStart/Preparation/InstallWizard.rst @@ -0,0 +1,61 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../../Includes.txt + + +=========== +Setup TYPO3 +=========== + +In this step your new TYPO3 instance will be setup with a initial +configuration. To gain access to the **TYPO3 Install Wizard** you need to +create the file :file:`FIRST_INSTALL` in the web server root directory: + +.. code-block:: bash + + ddev exec touch public/FIRST_INSTALL + ddev launch + +The last command will open the browser pointing to the **TYPO3 Install Wizard** +which is used for the initial setup of your project. Some steps are skipped +because various configurations like database credentials are already provided +by DDEV and you don't have to care about. + + +Step 1 +====== + +.. figure:: ../Images/Setup/Step1.png + :width: 500px + :alt: TYPO3 Install Wizard Step 1 + :class: with-border + +Just click :button:`No problems detected, continue with installation` to +continue with the next step. + + +Step 2 +====== + +.. figure:: ../Images/Setup/Step4.png + :width: 500px + :alt: TYPO3 Install Wizard Step 4 + :class: with-border + +Fill the form with the desired credentials for your administrative user and +click :button:`Continue` to head to the final step. + + +Step 3 +====== + +.. figure:: ../Images/Setup/Step5.png + :width: 500px + :alt: TYPO3 Install Wizard Step 5 + :class: with-border + +Select :button:`Create empty starting page` and click +:button:`Open the TYPO3 Backend` to be redirected to the backend login page. diff --git a/Documentation/QuickStart/Preparation/ProjectFolder.rst b/Documentation/QuickStart/Preparation/ProjectFolder.rst new file mode 100644 index 000000000..12eea6ae6 --- /dev/null +++ b/Documentation/QuickStart/Preparation/ProjectFolder.rst @@ -0,0 +1,25 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../../Includes.txt + + +======================= +Create a Project Folder +======================= + +Create a project folder for your new project. This is usualy done in your user +home directory or a sub folder but every place is possible. This guide will +use :file:`typo3-quick-start` as project folder. + +Create a folder :file:`packages` in your project folder. This folder will be +used as local path repository for project specific extensions and packages +like the **Sitepackage** we will create in the next step. + +.. code-block:: bash + + mkdir typo3-quick-start + cd typo3-quick-start + mkdir packages diff --git a/Documentation/QuickStart/Preparation/Sitepackage.rst b/Documentation/QuickStart/Preparation/Sitepackage.rst new file mode 100644 index 000000000..1461941c5 --- /dev/null +++ b/Documentation/QuickStart/Preparation/Sitepackage.rst @@ -0,0 +1,22 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../../Includes.txt + + +==================== +Create a Sitepackage +==================== + +Go to the `Sitepackage Builder `_, +create your personal **Sitepackage** and save it to the :file:`packages` +folder. Remeber the **Composer name** of your **Sitepackage** shown after the +creation, you will need it later again. This guide will use the +**Sitepackage name** :composer:`my-company/mysitepackage`. + +Extract your **Sitepackage** into a sub folder, usualy the name of the +downloaded ZIP file. Do not extract the **Sitepackage** directly into the +:file:`packages` folder. This guide will use the folder name +:file:`mysitepackage`. diff --git a/Documentation/QuickStart/Preparation/Template.rst b/Documentation/QuickStart/Preparation/Template.rst new file mode 100644 index 000000000..21c202539 --- /dev/null +++ b/Documentation/QuickStart/Preparation/Template.rst @@ -0,0 +1,125 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../../Includes.txt + + +============================= +Setup the TypoScript Template +============================= + + +Login to the Backend +==================== + +The **TYPO3 Install Wizard** should have redirected you to the backend login +screen. However you always can head to the backend with this command: + +.. code-block:: bash + + ddev launch typo3 + +Enter your choosen credentials here and login to the +TYPO3 backend. + +.. figure:: ../Images/Backend/Login.png + :width: 200px + :alt: TYPO3 Backend Login + :class: with-border + + +The Dashboard +------------- + +.. figure:: ../Images/Backend/Dashboard.png + :width: 800px + :alt: TYPO3 Dashboard + :class: with-shadow + +After the successful login you will be redirected to the TYPO3 Dashboard. + + +Edit the TypoScript Template +============================ + +On the left side choose the **Template module**. + +.. figure:: ../Images/Backend/TemplateModule.png + :width: 800px + :alt: TYPO3 Backend Login + :class: with-shadow + +Here you select the existing template **Main TypoScript Rendering** on the +page **Home**. + +On the top select :button:`Info/Modify` + +.. figure:: ../Images/Template/SelectAction.png + :alt: Select Template Action + :class: with-border + +and click to :button:`Edit the whole template record`. + +.. figure:: ../Images/Template/InfoModify.png + :width: 800px + :alt: Edit Template + :class: with-border + + +General +------- + +On the tab **General** remove the default content of the **Setup** field. You +are free to change here also the **Template Title**. + +.. figure:: ../Images/Template/General.png + :width: 800px + :alt: General Tab + :class: with-border + + +Options +------- + +On the tab **Options** change the settings according to this listing and the +following image: + +* Check **Clear Constants** +* Check **Clear Setup** +* Activate **Rootlevel** + +.. figure:: ../Images/Template/Options.png + :width: 800px + :alt: Options Tab + :class: with-border + + +Includes +-------- + +On the tab **Includes** change the settings according to this listing and the +following image: + +* Remove all **Include static (from extensions)** items +* Add your **Sitepackage** to **Include static (from extensions)** +* For **Static Template Files from TYPO3 Extensions** select + **Include before all static templates if root flag is set** + +.. figure:: ../Images/Template/Includes.png + :width: 800px + :alt: Options Tab + :class: with-border + + +Save and Close the Template +--------------------------- + +On the top click to **Save**: + +.. figure:: ../Images/Template/ButtonSave.png + :alt: Save Button + :class: with-border + +The template is now fully setup and you can close it. diff --git a/Documentation/QuickStart/Sitepackage/Index.rst b/Documentation/QuickStart/Sitepackage/Index.rst new file mode 100644 index 000000000..415447cbf --- /dev/null +++ b/Documentation/QuickStart/Sitepackage/Index.rst @@ -0,0 +1,23 @@ +.. ================================================== +.. FOR YOUR INFORMATION +.. -------------------------------------------------- +.. -*- coding: utf-8 -*- with BOM. + +.. include:: ../../Includes.txt + + +=========== +Sitepackage +=========== + +[Add introduction]. + + +Overview +======== + +.. toctree:: + :maxdepth: 5 + :titlesonly: + :glob: +