Add integrated tailwind support for client and server
This commit is contained in:
Daniel Egger
parent
740488cdeb
commit
c3f5e47be0
|
|
@ -273,9 +273,6 @@ vbv_lernwelt/media/
|
||||||
|
|
||||||
.pytest_cache/
|
.pytest_cache/
|
||||||
.ipython/
|
.ipython/
|
||||||
project.css
|
|
||||||
project.min.css
|
|
||||||
tailwind-output.css
|
|
||||||
vendors.js
|
vendors.js
|
||||||
*.min.js
|
*.min.js
|
||||||
.env
|
.env
|
||||||
|
|
@ -285,3 +282,4 @@ cypress/videos
|
||||||
cypress/screenshots
|
cypress/screenshots
|
||||||
cypress/test-reports
|
cypress/test-reports
|
||||||
|
|
||||||
|
/server/vbv_lernwelt/static/css/tailwind.css
|
||||||
|
|
|
||||||
50
README.md
50
README.md
|
|
@ -2,18 +2,27 @@
|
||||||
|
|
||||||
Project setup is based on [cookiecutter-django](https://github.com/cookiecutter/cookiecutter-django) project template.
|
Project setup is based on [cookiecutter-django](https://github.com/cookiecutter/cookiecutter-django) project template.
|
||||||
|
|
||||||
## Deployment to CapRover
|
## Run for development
|
||||||
|
|
||||||
```
|
```bash
|
||||||
# run deploy script
|
# run tailwind cli (on project root folder!)
|
||||||
./caprover_deploy.sh
|
npm run tailwind
|
||||||
```
|
|
||||||
|
|
||||||
|
# run vue vite dev server
|
||||||
|
cd client && npm run dev
|
||||||
|
|
||||||
|
# run django dev server
|
||||||
|
cd server && python manage.py runserver
|
||||||
|
```
|
||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
See `.tool-versions` file for used django and node version
|
See `.tool-versions` file for used django and node version
|
||||||
|
|
||||||
|
### Server part
|
||||||
|
|
||||||
|
Run every sub command in the `server` directory
|
||||||
|
|
||||||
Create a new PostgreSQL database and role
|
Create a new PostgreSQL database and role
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
|
|
@ -29,8 +38,6 @@ export VBV_DATABASE_URL='postgres://vbv_lernwelt@localhost:5432/vbv_lernwelt'
|
||||||
|
|
||||||
Set `VBV_DJANGO_READ_DOT_ENV_FILE=True` to make the config read the `example.env` file (with direnv!?).
|
Set `VBV_DJANGO_READ_DOT_ENV_FILE=True` to make the config read the `example.env` file (with direnv!?).
|
||||||
|
|
||||||
Apply migrations and run async server
|
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
python manage.py migrate
|
python manage.py migrate
|
||||||
|
|
||||||
|
|
@ -38,17 +45,34 @@ python manage.py migrate
|
||||||
python manage.py runserver
|
python manage.py runserver
|
||||||
|
|
||||||
# or async server
|
# or async server
|
||||||
uvicorn config.asgi:application --host 0.0.0.0 --reload
|
# uvicorn config.asgi:application --host 0.0.0.0 --reload
|
||||||
```
|
```
|
||||||
|
|
||||||
## SASS Live-Reloading
|
### Client part
|
||||||
|
|
||||||
|
Run every command in the `client` directory
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
# start django server...
|
npm install
|
||||||
# live reloading is hardcoded via proxy to port 8000 -> django server must get started manually
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# open site with http://localhost:3000
|
# run dev server
|
||||||
|
npm run dev
|
||||||
|
```
|
||||||
|
|
||||||
|
### General part
|
||||||
|
|
||||||
|
Cypress and TailwindCSS ist installed for client and server, so there is this package.json on the project root directory
|
||||||
|
|
||||||
|
```bash
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
## Deployment to CapRover
|
||||||
|
|
||||||
|
```
|
||||||
|
# run deploy script
|
||||||
|
./caprover_deploy.sh
|
||||||
```
|
```
|
||||||
|
|
||||||
## IntelliJ Configuration
|
## IntelliJ Configuration
|
||||||
|
|
|
||||||
|
|
@ -4,6 +4,7 @@
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" href="/favicon.ico" />
|
<link rel="icon" href="/favicon.ico" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<link href="/static/css/tailwind.css" rel="stylesheet">
|
||||||
<title>Vite App</title>
|
<title>Vite App</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
|
|
|
||||||
|
|
@ -41,7 +41,6 @@
|
||||||
"sass": "^1.50.1",
|
"sass": "^1.50.1",
|
||||||
"sass-loader": "^12.6.0",
|
"sass-loader": "^12.6.0",
|
||||||
"start-server-and-test": "^1.14.0",
|
"start-server-and-test": "^1.14.0",
|
||||||
"tailwindcss": "^3.0.24",
|
|
||||||
"typescript": "~4.6.3",
|
"typescript": "~4.6.3",
|
||||||
"vite": "^2.9.1",
|
"vite": "^2.9.1",
|
||||||
"vitest": "^0.8.1",
|
"vitest": "^0.8.1",
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,6 @@
|
||||||
module.exports = {
|
module.exports = {
|
||||||
plugins: {
|
plugins: {
|
||||||
'postcss-import': {},
|
'postcss-import': {},
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
autoprefixer: {},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1 @@
|
||||||
@import "fonts";
|
@import "fonts";
|
||||||
|
|
||||||
@tailwind base;
|
|
||||||
@tailwind components;
|
|
||||||
@tailwind utilities;
|
|
||||||
|
|
|
||||||
|
|
@ -23,7 +23,9 @@ export default {
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="circle">
|
<div class="circle">
|
||||||
<h1>{{circleData.title}}</h1>
|
<h1 class="text-3xl font-bold underline">
|
||||||
|
Hello world!
|
||||||
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,12 +6,11 @@
|
||||||
"cypress:open": "cypress open",
|
"cypress:open": "cypress open",
|
||||||
"cypress:run": "cypress run",
|
"cypress:run": "cypress run",
|
||||||
"cypress:ci": "cypress run --config baseUrl=http://localhost:8001",
|
"cypress:ci": "cypress run --config baseUrl=http://localhost:8001",
|
||||||
"cypress:ci:open": "cypress open --config baseUrl=http://localhost:8001"
|
"cypress:ci:open": "cypress open --config baseUrl=http://localhost:8001",
|
||||||
|
"tailwind": "tailwindcss -i ./tailwind/input.css -o ./server/vbv_lernwelt/static/css/tailwind.css --watch"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"cypress": "^9.4.1"
|
"cypress": "^9.4.1",
|
||||||
},
|
|
||||||
"dependencies": {
|
|
||||||
"tailwindcss": "^3.0.24"
|
"tailwindcss": "^3.0.24"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,50 +0,0 @@
|
||||||
# VBV Lernwelt
|
|
||||||
|
|
||||||
Project setup is based on [cookiecutter-django](https://github.com/cookiecutter/cookiecutter-django) project template.
|
|
||||||
|
|
||||||
## Installation
|
|
||||||
|
|
||||||
See `.tool-versions` file for used django and node version
|
|
||||||
|
|
||||||
Create a new PostgreSQL database and role
|
|
||||||
|
|
||||||
```bash
|
|
||||||
createdb vbv_lernwelt
|
|
||||||
createuser vbv_lernwelt
|
|
||||||
```
|
|
||||||
|
|
||||||
Set the environment variable accordingly
|
|
||||||
|
|
||||||
```bash
|
|
||||||
export VBV_DATABASE_URL='postgres://vbv_lernwelt@localhost:5432/vbv_lernwelt'
|
|
||||||
```
|
|
||||||
|
|
||||||
Set `VBV_DJANGO_READ_DOT_ENV_FILE=True` to make the config read the `example.env` file (with direnv!?).
|
|
||||||
|
|
||||||
Apply migrations and run async server
|
|
||||||
|
|
||||||
```bash
|
|
||||||
python manage.py migrate
|
|
||||||
|
|
||||||
# sync server
|
|
||||||
python manage.py runserver
|
|
||||||
|
|
||||||
# or async server
|
|
||||||
uvicorn config.asgi:application --host 0.0.0.0 --reload
|
|
||||||
```
|
|
||||||
|
|
||||||
## SASS Live-Reloading
|
|
||||||
|
|
||||||
```bash
|
|
||||||
# start django server...
|
|
||||||
# live reloading is hardcoded via proxy to port 8000 -> django server must get started manually
|
|
||||||
npm run dev
|
|
||||||
|
|
||||||
# open site with http://localhost:3000
|
|
||||||
```
|
|
||||||
|
|
||||||
## IntelliJ Configuration
|
|
||||||
|
|
||||||
* In the .idea/vbv_lernwelt.iml file change the module type to "PYTHON_MODULE".
|
|
||||||
* Add django facet in "Project Structure".
|
|
||||||
* Run configuration with "Python -> server.py" to have async debugging support.
|
|
||||||
|
|
@ -1,125 +0,0 @@
|
||||||
////////////////////////////////
|
|
||||||
// Setup
|
|
||||||
////////////////////////////////
|
|
||||||
|
|
||||||
// Gulp and package
|
|
||||||
const { src, dest, parallel, series, watch } = require('gulp')
|
|
||||||
const pjson = require('./package.json')
|
|
||||||
|
|
||||||
// Plugins
|
|
||||||
const autoprefixer = require('autoprefixer')
|
|
||||||
const browserSync = require('browser-sync').create()
|
|
||||||
|
|
||||||
const cssnano = require ('cssnano')
|
|
||||||
const pixrem = require('pixrem')
|
|
||||||
const plumber = require('gulp-plumber')
|
|
||||||
const postcss = require('gulp-postcss')
|
|
||||||
const reload = browserSync.reload
|
|
||||||
const rename = require('gulp-rename')
|
|
||||||
const sass = require('gulp-sass')(require('sass'))
|
|
||||||
// const spawn = require('child_process').spawn
|
|
||||||
const uglify = require('gulp-uglify-es').default
|
|
||||||
|
|
||||||
// Relative paths function
|
|
||||||
function pathsConfig(appName) {
|
|
||||||
this.app = `./${pjson.name}`
|
|
||||||
const vendorsRoot = 'node_modules'
|
|
||||||
|
|
||||||
return {
|
|
||||||
app: this.app,
|
|
||||||
templates: `${this.app}/templates`,
|
|
||||||
css: `${this.app}/static/css`,
|
|
||||||
sass: `${this.app}/static/sass`,
|
|
||||||
fonts: `${this.app}/static/fonts`,
|
|
||||||
images: `${this.app}/static/images`,
|
|
||||||
js: `${this.app}/static/js`,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
var paths = pathsConfig()
|
|
||||||
|
|
||||||
////////////////////////////////
|
|
||||||
// Tasks
|
|
||||||
////////////////////////////////
|
|
||||||
|
|
||||||
// Styles autoprefixing and minification
|
|
||||||
function styles() {
|
|
||||||
var processCss = [
|
|
||||||
autoprefixer(), // adds vendor prefixes
|
|
||||||
pixrem(), // add fallbacks for rem units
|
|
||||||
]
|
|
||||||
|
|
||||||
var minifyCss = [
|
|
||||||
cssnano({ preset: 'default' }) // minify result
|
|
||||||
]
|
|
||||||
|
|
||||||
return src(`${paths.sass}/project.scss`)
|
|
||||||
.pipe(sass({
|
|
||||||
includePaths: [
|
|
||||||
paths.sass
|
|
||||||
]
|
|
||||||
}).on('error', sass.logError))
|
|
||||||
.pipe(plumber()) // Checks for errors
|
|
||||||
.pipe(postcss(processCss))
|
|
||||||
.pipe(dest(paths.css))
|
|
||||||
.pipe(rename({ suffix: '.min' }))
|
|
||||||
.pipe(postcss(minifyCss)) // Minifies the result
|
|
||||||
.pipe(dest(paths.css))
|
|
||||||
}
|
|
||||||
|
|
||||||
// Javascript minification
|
|
||||||
function scripts() {
|
|
||||||
return src(`${paths.js}/project.js`)
|
|
||||||
.pipe(plumber()) // Checks for errors
|
|
||||||
.pipe(uglify()) // Minifies the js
|
|
||||||
.pipe(rename({ suffix: '.min' }))
|
|
||||||
.pipe(dest(paths.js))
|
|
||||||
}
|
|
||||||
|
|
||||||
// Browser sync server for live reload
|
|
||||||
function initBrowserSync() {
|
|
||||||
browserSync.init(
|
|
||||||
[
|
|
||||||
`${paths.css}/*.css`,
|
|
||||||
`${paths.js}/*.js`,
|
|
||||||
`${paths.templates}/*.html`
|
|
||||||
], {
|
|
||||||
// https://www.browsersync.io/docs/options/#option-open
|
|
||||||
// Disable as it doesn't work from inside a container
|
|
||||||
open: false,
|
|
||||||
// https://www.browsersync.io/docs/options/#option-proxy
|
|
||||||
proxy: {
|
|
||||||
target: 'localhost:8000',
|
|
||||||
proxyReq: [
|
|
||||||
function(proxyReq, req) {
|
|
||||||
// Assign proxy "host" header same as current request at Browsersync server
|
|
||||||
proxyReq.setHeader('Host', req.headers.host)
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
}
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Watch
|
|
||||||
function watchPaths() {
|
|
||||||
watch(`${paths.sass}/*.scss`, styles)
|
|
||||||
watch(`${paths.templates}/**/*.html`).on("change", reload)
|
|
||||||
watch([`${paths.js}/*.js`, `!${paths.js}/*.min.js`], scripts).on("change", reload)
|
|
||||||
}
|
|
||||||
|
|
||||||
// Generate all assets
|
|
||||||
const generateAssets = parallel(
|
|
||||||
styles,
|
|
||||||
scripts,
|
|
||||||
)
|
|
||||||
|
|
||||||
// Set up dev environment
|
|
||||||
const dev = parallel(
|
|
||||||
initBrowserSync,
|
|
||||||
watchPaths
|
|
||||||
)
|
|
||||||
|
|
||||||
exports.default = series(generateAssets, dev)
|
|
||||||
exports["generate-assets"] = generateAssets
|
|
||||||
exports["dev"] = dev
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
{
|
|
||||||
"name": "vbv_lernwelt",
|
|
||||||
"version": "0.1.0",
|
|
||||||
"devDependencies": {
|
|
||||||
"autoprefixer": "^10.4.0",
|
|
||||||
"browser-sync": "^2.27.7",
|
|
||||||
"cssnano": "^5.0.11",
|
|
||||||
"gulp": "^4.0.2",
|
|
||||||
"gulp-plumber": "^1.2.1",
|
|
||||||
"gulp-postcss": "^9.0.1",
|
|
||||||
"gulp-rename": "^2.0.0",
|
|
||||||
"gulp-sass": "^5.0.0",
|
|
||||||
"gulp-uglify-es": "^3.0.0",
|
|
||||||
"pixrem": "^5.0.0",
|
|
||||||
"postcss": "^8.3.11",
|
|
||||||
"sass": "^1.43.4",
|
|
||||||
"tailwindcss": "^3.0.18"
|
|
||||||
},
|
|
||||||
"engines": {
|
|
||||||
"node": "16"
|
|
||||||
},
|
|
||||||
"browserslist": [
|
|
||||||
"last 2 versions"
|
|
||||||
],
|
|
||||||
"scripts": {
|
|
||||||
"dev": "gulp",
|
|
||||||
"tailwind": "tailwindcss -i ./vbv_lernwelt/static/tailwind/input.css -o ./vbv_lernwelt/static/css/tailwind-output.css --watch",
|
|
||||||
"build": "tailwindcss -i ./vbv_lernwelt/static/tailwind/input.css -o ./vbv_lernwelt/static/css/tailwind-output.css && gulp generate-assets"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,7 +0,0 @@
|
||||||
module.exports = {
|
|
||||||
content: ["./vbv_lernwelt/**/*.{html,js}"],
|
|
||||||
theme: {
|
|
||||||
extend: {},
|
|
||||||
},
|
|
||||||
plugins: [],
|
|
||||||
}
|
|
||||||
|
|
@ -1 +0,0 @@
|
||||||
/* Project specific Javascript goes here. */
|
|
||||||
|
|
@ -1,4 +0,0 @@
|
||||||
.task.htmx-swapping {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity 1s ease-out;
|
|
||||||
}
|
|
||||||
|
|
@ -0,0 +1,18 @@
|
||||||
|
module.exports = {
|
||||||
|
content: [
|
||||||
|
'./client/index.html',
|
||||||
|
'./client/src/**/*.{vue,js,ts,jsx,tsx}',
|
||||||
|
'./server/vbv_lernwelt/**/*.{html,js}',
|
||||||
|
],
|
||||||
|
theme: {
|
||||||
|
colors: {
|
||||||
|
'white': '#FFFFFF',
|
||||||
|
'blue-dark': '#00224D'
|
||||||
|
},
|
||||||
|
fontFamily: {
|
||||||
|
sans: ['BuenosAires', 'sans-serif'],
|
||||||
|
},
|
||||||
|
extend: {},
|
||||||
|
},
|
||||||
|
plugins: [],
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue