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/
|
||||
.ipython/
|
||||
project.css
|
||||
project.min.css
|
||||
tailwind-output.css
|
||||
vendors.js
|
||||
*.min.js
|
||||
.env
|
||||
|
|
@ -285,3 +282,4 @@ cypress/videos
|
|||
cypress/screenshots
|
||||
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.
|
||||
|
||||
## Deployment to CapRover
|
||||
## Run for development
|
||||
|
||||
```
|
||||
# run deploy script
|
||||
./caprover_deploy.sh
|
||||
```
|
||||
```bash
|
||||
# run tailwind cli (on project root folder!)
|
||||
npm run tailwind
|
||||
|
||||
# run vue vite dev server
|
||||
cd client && npm run dev
|
||||
|
||||
# run django dev server
|
||||
cd server && python manage.py runserver
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
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
|
||||
|
||||
```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!?).
|
||||
|
||||
Apply migrations and run async server
|
||||
|
||||
```bash
|
||||
python manage.py migrate
|
||||
|
||||
|
|
@ -38,17 +45,34 @@ python manage.py migrate
|
|||
python manage.py runserver
|
||||
|
||||
# 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
|
||||
# start django server...
|
||||
# live reloading is hardcoded via proxy to port 8000 -> django server must get started manually
|
||||
npm run dev
|
||||
npm install
|
||||
|
||||
# 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
|
||||
|
|
|
|||
|
|
@ -4,6 +4,7 @@
|
|||
<meta charset="UTF-8" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<link href="/static/css/tailwind.css" rel="stylesheet">
|
||||
<title>Vite App</title>
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -41,7 +41,6 @@
|
|||
"sass": "^1.50.1",
|
||||
"sass-loader": "^12.6.0",
|
||||
"start-server-and-test": "^1.14.0",
|
||||
"tailwindcss": "^3.0.24",
|
||||
"typescript": "~4.6.3",
|
||||
"vite": "^2.9.1",
|
||||
"vitest": "^0.8.1",
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
'postcss-import': {},
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1 @@
|
|||
@import "fonts";
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,9 @@ export default {
|
|||
|
||||
<template>
|
||||
<div class="circle">
|
||||
<h1>{{circleData.title}}</h1>
|
||||
<h1 class="text-3xl font-bold underline">
|
||||
Hello world!
|
||||
</h1>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -6,12 +6,11 @@
|
|||
"cypress:open": "cypress open",
|
||||
"cypress:run": "cypress run",
|
||||
"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": {
|
||||
"cypress": "^9.4.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"cypress": "^9.4.1",
|
||||
"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