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 May 21, 2020
1 parent 929f541 commit 77926d6
Show file tree
Hide file tree
Showing 28 changed files with 483 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.
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.
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
70 changes: 70 additions & 0 deletions Documentation/QuickStart/Preparation/Composer.rst
Original file line number Diff line number Diff line change
@@ -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 <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.


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.
20 changes: 20 additions & 0 deletions Documentation/QuickStart/Preparation/Ddev.rst
Original file line number Diff line number Diff line change
@@ -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.
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.
32 changes: 32 additions & 0 deletions Documentation/QuickStart/Preparation/Index.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
.. ==================================================
.. 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
Page
61 changes: 61 additions & 0 deletions Documentation/QuickStart/Preparation/InstallWizard.rst
Original file line number Diff line number Diff line change
@@ -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.
34 changes: 34 additions & 0 deletions Documentation/QuickStart/Preparation/Page.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


====================
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 :button:`+ Content`.

.. figure:: ../Images/Page/ButtonAddContent.png
:alt: Add Content
: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`.
25 changes: 25 additions & 0 deletions Documentation/QuickStart/Preparation/ProjectFolder.rst
Original file line number Diff line number Diff line change
@@ -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.

In your project folder create a folder :file:`packages`. 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
27 changes: 27 additions & 0 deletions Documentation/QuickStart/Preparation/Sitepackage.rst
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
.. ==================================================
.. FOR YOUR INFORMATION
.. --------------------------------------------------
.. -*- coding: utf-8 -*- with BOM.
.. include:: ../../Includes.txt


====================
Create a Sitepackage
====================

Go to the `Sitepackage Builder <https://www.sitepackagebuilder.com/new/>`_
and create your personal **Sitepackage**.

Make sure you select the correct **TYPO3 Version** and **Base Package**, you
can relay your **Sitepackage** on the TYPO3 extension **Bootstrap Package** or
on pure core functionality by selecting **Fluid Styled Content**.

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`.

Save the generated **Sitepackage** to the :file:`packages` folder and extract
it 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`.
Loading

0 comments on commit 77926d6

Please sign in to comment.