Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/rompiot/integration-setup
Front integration setup like twig or jinja2, no backend, and with live reloading and auto compile assets. Built with nunjucks, express, webpack, bootstrap
https://github.com/rompiot/integration-setup
bootstrap express expressjs front-end-development frontend integration jinja jinja2 jinja2-templates nunjucks nunjucks-starter-kit twig twig-templates webpack
Last synced: 3 days ago
JSON representation
Front integration setup like twig or jinja2, no backend, and with live reloading and auto compile assets. Built with nunjucks, express, webpack, bootstrap
- Host: GitHub
- URL: https://github.com/rompiot/integration-setup
- Owner: RomPiot
- Created: 2023-03-23T01:49:29.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2023-03-31T23:23:29.000Z (over 1 year ago)
- Last Synced: 2024-12-19T20:09:52.663Z (3 days ago)
- Topics: bootstrap, express, expressjs, front-end-development, frontend, integration, jinja, jinja2, jinja2-templates, nunjucks, nunjucks-starter-kit, twig, twig-templates, webpack
- Language: JavaScript
- Homepage:
- Size: 338 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Integration Setup
A simple boilerplate to create a new website integration.
When the server is started, it automatically builds the JS and CSS files whenever the asset files change, and
automatically reloads the site in the browser when a file is modified and saved.In this example project, the chosen template file extension is ".html.twig" (to be easily integrated in a Symfony
project). But you are free to choose the desired file extension (html, njk, etc)In the "templates" folder, the loaded pages are the files at the root of this folder.
To provide data that can be used as variables in the template files, create a new json file in the "data" folder, named
exactly the same as the template file.
For example, in this project, we have 2 pages ("home.html.twig" and "test.html.twig"). In data, we have 2 json files
named
"home.json" and "test.json".## Requirements
Tip: use nvm for better flexibility of node version
- NodeJS
- NPM (or Yarn)## Installation
You can replace "yarn" with "npm" if you wish. I chose Yarn, simply by personal preference
```
yarn install
```## Configuration
To override the configuration, copy and paste the .env.example file and rename it to .env, and edit the values.
## Start the server
```
yarn start
```By default, without custom configuration, go to: `http://localhost:3001`
## Features
### json inheritance
You can include json data in other json, by specifying in the value of your key the "include_data" function, pointing to the associated file in dataExample : (in home.json)
```json
"cards": "include_data('project.json')"
```For this to work, you need to add a root key named "include_data" in the file you want to include, and specify the data you want to include in your file.
Example : (in project.json)
```json
{
"include_data": [
{
"id": 82,
"title": "enim commodo consequat ad laboris",
"description": "veniam consequat cillum sit incididunt anim ex ullamco enim anim consequat nostrud velit labore id occaecat",
"image": {
"url": "https://loremflickr.com/500/500/landscape?lock=",
"alt": "exercitation duis",
"title": "do sunt velit et cillum eu ipsum incididunt exercitation cupidatat reprehenderit aliqua eiusmod officia ut non nisi irure ut irure"
},
"date": "2022-03-09"
}
]
}
```