website-template

Template used for creating new websites, using Webkit, Twig, Typescript and our Module Template System

BASICS

The 2 base things in this templating system is [[Component]] and [[ComponentNode]]

Every DOM element with the attribute "data-module" will have an Instance of [[ComponentNode]] wrapped around it. And that Instance, containing references to the [[Component]]'s on that DOM element.

A DOM element can only ever have one ComponentNode, but can have multiple Component's on it.

Example:

<div data-module="CompOne, CompTwo, CompThree"></div>

This would create a ComponentNode and three modules all extending [[Component]]'s.

SETUP

In the root folder run:

npm install
composer install

Install MaMP Pro and run a localhost on the app/ folder.

Create a .env file in the root folder and copy paste the settings from .env.defaults

Make sure the HOST and PORT in the .env is set to localhost created by MaMP

MAMP_HOST=snailtemplate
MAMP_PORT=8888

To start the server, run:

npm start

TROUBLESHOOTING

In case you are working on multiple projects using Node. Remember, you can only ever have one node server running at a time, Try:

sudo killall node 

SCRIPTS

start the node server:

npm start 

Compile a release build:

npm run build

Compile Docs:

npm run docs    

Create new Module setup with .scss .html.twig and .tsx:

plop [[ModuleName]]