Svelte meets typo3 + vite in DDEV. ๐งก
Fork of fgeierst/typo3-vite-demo.
Status: Work in Progress. ๐งโ๐ง
This demo uses:
- https://github.com/drud/ddev (Discord)
- https://github.com/torenware/ddev-viteserve
- https://github.com/helhum/dotenv-connector
- https://vitejs.dev/
- https://github.com/sveltejs/vite-plugin-svelte
Thanks very much to @bokunomaxi for typo3 support! Looking for a solution for LaravelMix + Svelte? We're working on a demo repository as well!
Disclaimer: I'm a typo3 noob. Suggestions for improvement welcome ;-)
These are the steps needed after you clone this repository:
ddev start && \
ddev exec 'cp .env.example .env' && \
ddev composer install && \
ddev snapshot restore --latest && \
ddev npm install && \
ddev launch
You can access typo3 via https://ddev-typo3-vite-svelte.ddev.site/typo3:
User: admin
Password: VwM308w5Xsuxa4C
To start local development with vite, run:
ddev npm run dev
You can also use ddev vite-serve start
/ ddev vite-serve stop
)
Run a vite build for production:
ddev npm run build
Switch applicationContext to production in .env
:
# Switch easily between Development/Local and Production/Live
# TYPO3_CONTEXT="Development/Local"
TYPO3_CONTEXT="Production/Live"
Followed steps of DDEV typo3 quickstart docs, but used v11:
ddev config --project-type=typo3 --docroot=public --create-docroot --php-version 8.1 && \
ddev start && \
ddev composer create "typo3/cms-base-distribution:^11" --prefer-dist && \
ddev exec touch public/FIRST_INSTALL && \
ddev launch
# Finish installation in browser with database:'db',db-user:'db',host:'db'
# Selected option "Create empty starting page"
Custom site package:
- Created sitepackage via https://www.sitepackagebuilder.com/ (fluid + 11.5)
- Copy package to new folder
packages
- Installed package via composer
- docs: https://docs.typo3.org/m/typo3/tutorial-sitepackage/main/en-us/ExtensionInstallation/Index.html#extension-installation-in-composer-mode
ddev composer require no-company/svelte-demo:@dev
Add svelte-demo to the static includes:
NodeJS Installation:
ddev npm init -y
ddev npm install vite @sveltejs/vite-plugin-svelte --save-dev
- Added scripts section to package.json:
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
- Created
vite.config.js
ddev-viteserve installation:
ddev get torenware/ddev-viteserve
ddev restart
Created .ddev/env
for npm:
# start vite
VITE_PROJECT_DIR=.
VITE_PRIMARY_PORT=5173
VITE_SECONDARY_PORT=5273
VITE_JS_PACKAGE_MGR=npm
# end vite
- Used typoscript snippets and user function for loading vite from https://github.com/fgeierst/typo3-vite-demo
Use dotenv-connector for fast switch between Production/Live
and Development/Local
:
ddev composer req helhum/dotenv-connector
Thanks to https://blog.blue-side.de/2021/02/benutzung-von-env-in-typo3/.
Finally created an HTML block:
- TODO: Add screenshot for HTML block
Looking for LaravelMix? Coming soon! (https://github.com/mandrasch/ddev-typo3-mix-svelte)
Interested in WordPress development? https://github.com/mandrasch/ddev-wp-acf-blocks-svelte
See https://my-ddev-lab.mandrasch.eu/ for more experiments.
- Add gitpod support? (see: https://github.com/fgeierst/typo3-vite-demo)
- Add support for
<style lang="scss">
- Add props for svelte components (see: https://github.com/mandrasch/ddev-wp-acf-blocks-svelte)