Webiik comes with advanced frontend environment based on:
Out of the box features:
Frontend related files have the following structure:
. .. (this folder must be not accessible from the web) ├── private (this folder must be not accessible from the web) | └── frontend (templates and assets) | ├── assets (read the frontend docs in the basics) | | ├── build (js build for client and server) | | ├── components (UI components) | | | └── meow (React Meow World! component) | | | ├── meow.scss | | | └── meow.tsx | | ├── font (css font files) | | ├── img (images) | | ├── js (js or ts files) | | | ├── _app.ts (app-wide TypeScript file included in webpack.config.js) | | | ├── home.ts (route related TypeScript file included in webpack.config.js) | | | ├── home-iso.ts (route related TypeScript file included in webpack.config.js) | | | └── screensize.ts (helper for frontend development included in _app.ts) | | ├── scss (scss files) | | | ├── _app.scss (app-wide scss file included in app.ts) | | | └── home.scss (route related scss file included in home.ts) | | ├── global.d.ts (global helper variable definition) | | ├── package.json (NPM file) | | ├── postcss.config.js (Webpack's postcss-loader config) | | ├── tsconfig.json (TypeScript config) | | └── webpack.config.js (Webpack config) | ├── _app.twig (base Twig template) | └── home.twig (route related Twig template) └── public (this folder must be accessible from the web) └── assets (static files generated by Webpack)
1. Open the terminal and go to folder:
2. Install dependencies required for frontend development:
Maybe you will need to install npm.
3. In your editor, prepare Twig templates inside
This is standard Twig, no magic behind. If you don’t know what you are doing, read Twig docs.
4. Place your assets: JS(TS) files, images, fonts, CSS(SCSS) files, and React components into appropriate folders (see the directory structure above).
scssfolders. Webiik loads these files in every route.
WEBIIK_DEBUGvariable inside your JS(TS) files.
truewhen code is build with
devNPM script (see point 6).
5. In your editor, open
private/frontend/assets/webpack.config.js and add your assets to the
entries object. Even if you don’t plan to use server side rendering, it’s a good idea to import your React components separately in
iso files. Please, read comments within
webpack.config.js for more details.
This is standard Webpack, no magic behind. If you don’t know what you are doing, read Webpack docs.
6. Build your files:
npm run dev
npm run prod.
npm run watch.