Skip to content

Commit

Permalink
[DOCS] Add quick start chapter
Browse files Browse the repository at this point in the history
  • Loading branch information
gilbertsoft committed Nov 28, 2021
1 parent 929f541 commit f527f01
Show file tree
Hide file tree
Showing 33 changed files with 576 additions and 0 deletions.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Documentation/QuickStart/Images/Backend/Login.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Documentation/QuickStart/Images/ProjectFolder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Documentation/QuickStart/Images/Setup/Step1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Documentation/QuickStart/Images/Setup/Step4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Documentation/QuickStart/Images/Setup/Step5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
43 changes: 43 additions & 0 deletions Documentation/QuickStart/Index.rst
Original file line number Diff line number Diff line change
@@ -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 <https://ddev.readthedocs.io/en/stable/>`_
* `Git <https://git-scm.com/>`_ 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 <https://code.visualstudio.com/Download>`_
or `PhpStorm <https://www.jetbrains.com/de-de/phpstorm/download/>`_

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
98 changes: 98 additions & 0 deletions Documentation/QuickStart/Preparation/Composer.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,98 @@
.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.
.. include:: ../../Includes.txt


==================
Configure Composer
==================


Now it's time to tell Composer which packages and TYPO3 extensions you like to
install and setup. The initial setup we have already done before with the
download of the TYPO3 Base Distribution.


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
You also need to change the :file:`.gitignore` in your project root a little
bit. Just copy the lines starting with /public/... and replace **public** by
**private** but omit the last line with the
:file:`!/private/typo3conf/AdditionalConfiguration.php`. Finally it should look
similar to this one:

.. code-block:: json
.DS_Store
.idea
nbproject
/var/*
!/var/labels
/vendor
/public/*
!/public/.htaccess
!/public/typo3conf
/public/typo3conf/*
!/public/typo3conf/LocalConfiguration.php
!/public/typo3conf/AdditionalConfiguration.php
/private/*
!/private/.htaccess
!/private/typo3conf
/private/typo3conf/*
!/private/typo3conf/LocalConfiguration.php
More information can be found at the `TYPO3 Secure Web Github Repository <https://github.com/helhum/typo3-secure-web#readme>`_


Additional TYPO3 (Core) Extensions
==================================

You are free to add more packages, for core extensions head to the
`Composer Helper <https://get.typo3.org/misc/composer/helper>`_ and select the
desired packages, extensions can be found at the
`TYPO3 Extension Repository <https://extensions.typo3.org/>`_. Make sure you
always add the :composer:`--no-update` option to avoid version conflicts
later.

.. code-block:: bash
ddev composer require "typo3/cms-lowlevel:^10.4"
ddev composer require georgringer/news
Be careful when installing **Distributions**, they may conflict with the
**Sitepackage**. So consider to install a **Distribution** only and adding
the **Sitepackage** later.


Install the Packages
====================

Once you have finished adding more packages run the following commands to
start the installation process:

.. code-block:: bash
ddev composer install
ddev composer install
Yes, run the same command twice, there may be issues with the creation of
symlinks in the web container and a second run solves it! If you see your
**Sitepackage** in the lines of activated packages you can also omit the
second run but it does not hurt anyway.

Your project is now installed and ready to setup.
23 changes: 23 additions & 0 deletions Documentation/QuickStart/Preparation/Git.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.
.. include:: ../../Includes.txt


==============================================
Initialize the local Git Repository (optional)
==============================================

It is recommended you manage your project with version control system like
**Git** but there is no restriction, you can use your favorite one. This guide
will use **Git** in the examples.

.. code-block:: bash
git init
Your local repository is now setup and ready to use. Please head to the
`Git documentation <https://git-scm.com/doc>`_ to learn how to use **Git** for
your daily work.
31 changes: 31 additions & 0 deletions Documentation/QuickStart/Preparation/Index.rst
Original file line number Diff line number Diff line change
@@ -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
Composer
InstallWizard
Git
Template
Page
68 changes: 68 additions & 0 deletions Documentation/QuickStart/Preparation/InstallWizard.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,68 @@
.. ==================================================
.. 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
With TYPO3 Secure Web use the following commands:

.. code-block:: bash
ddev exec touch private/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.
80 changes: 80 additions & 0 deletions Documentation/QuickStart/Preparation/Page.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.
.. include:: ../../Includes.txt


====================
Provide some Content
====================

On the left side choose the **Page module** and in the **page tree** click the
page **Home**.

.. figure:: ../Images/Backend/PageModule.png
:width: 800px
:alt: TYPO3 Page Module
:class: with-shadow

Add a new content element by clicking

.. figure:: ../Images/Page/ButtonAddContent.png
:alt: Add Content
:class: with-border

On the **Content Element Wizard** you choose **Regular Text Element**.

.. figure:: ../Images/Page/NewContentElementWizard.png
:alt: New Content Element Wizard
:class: with-border

Fill some content into the field **Header** and **Text**.

.. figure:: ../Images/Page/RegularTextElement.png
:width: 800px
:alt: Create new Page Content
:class: with-border

On the top click :button:`Save` and :button:`Preview`.

Now you see your first page with the created content before:

.. figure:: ../Images/Frontend/Home.png
:width: 800px
:alt: Home Page
:class: with-shadow

Now lets add some more pages and content to the new site:

* A new **Shortcut** with the name **Home**
* A new **Menu separator** with the name **Divider**
* Some new pages e.g. **Page 1** to **Page 3**

Afterwards click on every created icon and enable all of it.

.. figure:: ../Images/Page/ContextMenu.png
:alt: Context Menu
:class: with-border

Edit the shurtcut **Home** and change the **Shurtcut Mode** to
**Parent page of selected/current page**:

.. figure:: ../Images/Page/ShurtcutMode.png
:alt: Context Menu
:class: with-border

Save the changes and now you should end with the following page tree:

.. figure:: ../Images/Page/PageTreeAfter.png
:alt: Page Tree
:class: with-border

Click again to the :button:`Preview` button and see the new page with the
menu:

.. figure:: ../Images/Frontend/HomeWithMenu.png
:width: 800px
:alt: Home Page with menu
:class: with-shadow
34 changes: 34 additions & 0 deletions Documentation/QuickStart/Preparation/ProjectFolder.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.
.. include:: ../../Includes.txt


==========================
Prepare the Project Folder
==========================


Create a Project Folder
=======================

Create a project folder for your new web site 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.


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 composer create "typo3/cms-base-distribution:^10" --no-install
ddev start
This will setup DDEV Local and download the TYPO3 Base Distribution.
Loading

0 comments on commit f527f01

Please sign in to comment.