Boilerplate Vite Twig

Boilerplate with Twig / Bootstrap / SCSS / jQuery

View Demo · Documentation · Report Bug · Request Feature

📔 Table of Contents

• About the Project
  • Features
• Getting Started
  • Prerequisites
  • Run Locally
  • Deployment
• Contributing
• Contact

🌟 About the Project

🎯 Features

• Build assets using Vite.js
• Twig support
• Bootstrap support
• jQuery support

🧰 Getting Started

‼️ Prerequisites

This project uses Yarn as package manager

 npm install --global yarn

🏃 Run Locally

Clone the project

  git clone https://github.com/Romaixn/boilerplate-vite-twig.git

Go to the project directory

  cd boilerplate-vite-twig

Install dependencies

  yarn install

Start the server

  yarn dev

How to add pages ?

Create the twig file

Create a twig file in the templates folder with this minimal content:

{% extends "base.html.twig" %}

{% block body %}
    Your content here
{% endblock %}

The content of the page will go between the block body and the endblock

Create the html file

Add the page in .html format to the root of the project. (next to index.html and about.html) With this minimal content:

<script type="application/json" data-template="templates/name-of-your-page.html.twig">
{
}
</script>

Replace name-of-your-page by the name of your template

You can add any variables you want in JSON. (a list of items for use in loop, the title of the page, etc..)

Adding output for production build

Add your page in vite.config.js file in the root of the project.

🚩 Deployment

To build your assets run

  yarn build

👋 Contributing

Contributions are always welcome!

See contributing.md for ways to get started.

🤝 Contact

Romain Herault - @Romaixn

Project Link: https://github.com/Romaixn/boilerplate-vite-twig