You can install Twill on an existing Laravel application or a new one.
If this is your first time using Twill or you just want to experiment with a Twill installation you can use the starter kit to quickly get started.
The basic page builder guide is a step-by-step guide on how to create what is in this example!
The starter kit setup is a basic page builder. It comes with:
You can install it in a Laravel application using:
1composer require area17/twill:"^3.4"
This command will migrate your database.
Make sure to setup your .env file with your database credentials and to run it where your database is accessible (ie. using sail
if you are using Laravel Sail or using Vagrant if you are using Laravel Homestead).
1php artisan twill:install basic-page-builder
See examples/basic-page-builder
for detailed instructions on setting up the starter kit.
Twill package can be added to your application using Composer:
1composer require area17/twill:"^3.4"
This command will migrate your database.
Make sure to setup your .env file with your database credentials and to run it where your database is accessible (ie. using sail
if you are using Laravel Sail or using Vagrant if you are using Laravel Homestead).
1php artisan twill:install
Twill's install
command consists of:
twill.php
routes files in your application's routes
directory. This is where you will declare your own admin console routes.twill.php
to your application's config
directory.public
directory.If you have not yet done this following the Laravel installation guide, now would be a good time to run php artisan storage:link
to set up the storage folders mapping to the public directory.
By default, Twill's admin console is available at domain.test/admin
If you want to modify the admin
path you can use the ADMIN_APP_PATH
environment variable:
1ADMIN_APP_PATH=/cms
If you want to serve Twill from a subdomain you will have to set the admin app url as follows:
1ADMIN_APP_URL=http://admin.domain.test
In development, make sure that the admin
subdomain is available and pointing to your app's public
directory.
If you are a Valet user, this is already done for you (any subdomain is linked to the same directory as the linked domain).
If you are a Homestead user, make sure to add the subdomain to your /etc/hosts
file too:
1# this is an example, use your own IP and domain2192.168.10.10 domain.test3192.168.10.10 admin.domain.test
When running Twill and your frontend on 2 different subdomains, you'll probably want to share cookies between both domains so that publishers can access drafts on the frontend (if you are allowing that in your integration). Use the SESSION_DOMAIN
variable with your domain, prefixed by a dot, like in the following example:
1SESSION_DOMAIN=.domain.test
Of course, you can specify a custom subdomain using the ADMIN_APP_URL
variable. it doesn't have to be admin
:
1ADMIN_APP_URL=http://manage.domain.test
By default, when using a path, Twill does not care about the domain you are on. But if you need this to be more strict
you can add ADMIN_APP_STRICT=true
to your .env
file.
This way, if APP_URL
does not match your domain, it will not show the admin panel on the app path.
At this point, you should be able to login at domain.test/admin
, admin.domain.test
or manage.domain.test
depending
on your environment configuration. You should be presented with a dashboard with an empty activities list, a link to
open Twill's media library and a dropdown to manage users, your own account and logout.
From there, you might want to configure Twill's media library's storage provider and its rendering service.
By default, Twill uses your Laravel public storage directory to store uploads, and renders images dynamically using Glide.
See the media library's configuration documentation for more information.
Provide the following environment variables to get up and running to store uploads on S3 (AWS or other S3 compliant services, like Digital Ocean Spaces and Scaleway Object Storage):
1S3_KEY=2S3_SECRET=3S3_BUCKET=4S3_REGION=
Twill's uploader is doing direct uploads from the browser to your S3 bucket, so you'll need to make sure the bucket CORS policy allows requests from your CMS domain.
S3_ROOT
, S3_URL
, S3_ENDPOINT
and S3_USE_PATH_STYLE_ENDPOINT
variables are also available.
Provide the following environment variables to get up and running to store uploads on Azure Blob Storage:
1AZURE_ACCOUNT_KEY=2AZURE_ACCOUNT_NAME=
Twill's uploader is doing direct uploads from the browser to your Blob Storage, so you'll need to make sure its CORS policy allows requests from your CMS domain.
AZURE_CONTAINER
, AZURE_ENDPOINT_SUFFIX
, AZURE_UPLOADER_USE_HTTPS
variables are also available.
Twill supports Imgix and Twicpics to offload the rendering of responsive images.
For example, with Imgix, assuming you configured a source on top of the S3 bucket storing your Twill uploads, you can use the following environment variables:
1MEDIA_LIBRARY_IMAGE_SERVICE="A17\Twill\Services\MediaLibrary\Imgix"2IMGIX_SOURCE_HOST=source.imgix.net
IMGIX_USE_SIGNED_URLS
, and IMGIX_SIGN_KEY
variables are also available.
On your frontend domain (domain.test
), nothing changed, and that's ok! Twill does not make any assumptions regarding how you might want to build your own applications. It is up to you to setup Laravel routes that queries content created through Twill's admin console. You can decide to use server side rendering with Laravel's Blade templating and/or to define API endpoints to build your frontend application using any client side solution (eg. Vue, React, Angular, ...).
On a clean Laravel install, you should still see Laravel's welcome screen. If you installed Twill on an existing Laravel application, your setup should not be affected. Do not hesitate to reach out on GitHub or Discord if you have a specific use case or any trouble using Twill with your existing application.