diff --git a/.gitignore b/.gitignore index 2e6f0511..1f9e5551 100644 --- a/.gitignore +++ b/.gitignore @@ -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 diff --git a/README.md b/README.md index 8ab71bfb..7d934a41 100644 --- a/README.md +++ b/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 diff --git a/client/index.html b/client/index.html index 11603f87..3ee6e472 100644 --- a/client/index.html +++ b/client/index.html @@ -4,6 +4,7 @@ + Vite App diff --git a/client/package.json b/client/package.json index 9ce03b31..bbdae473 100644 --- a/client/package.json +++ b/client/package.json @@ -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", diff --git a/client/postcss.config.js b/client/postcss.config.js index d0ffab7e..bb637173 100644 --- a/client/postcss.config.js +++ b/client/postcss.config.js @@ -1,7 +1,6 @@ module.exports = { plugins: { 'postcss-import': {}, - tailwindcss: {}, autoprefixer: {}, }, } diff --git a/client/src/assets/styles/index.scss b/client/src/assets/styles/index.scss index b174f7a3..dd68bcb8 100644 --- a/client/src/assets/styles/index.scss +++ b/client/src/assets/styles/index.scss @@ -1,5 +1 @@ @import "fonts"; - -@tailwind base; -@tailwind components; -@tailwind utilities; diff --git a/client/src/views/CircleAnalyseExampleView.vue b/client/src/views/CircleAnalyseExampleView.vue index 988f0b0f..079a0b1f 100644 --- a/client/src/views/CircleAnalyseExampleView.vue +++ b/client/src/views/CircleAnalyseExampleView.vue @@ -23,7 +23,9 @@ export default { diff --git a/package.json b/package.json index c358f6b8..5e6a82aa 100644 --- a/package.json +++ b/package.json @@ -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" } } diff --git a/server/README.md b/server/README.md deleted file mode 100644 index eadebd29..00000000 --- a/server/README.md +++ /dev/null @@ -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. diff --git a/server/gulpfile.js b/server/gulpfile.js deleted file mode 100644 index c454feea..00000000 --- a/server/gulpfile.js +++ /dev/null @@ -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 diff --git a/server/package.json b/server/package.json deleted file mode 100644 index 4d1bc172..00000000 --- a/server/package.json +++ /dev/null @@ -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" - } -} diff --git a/server/tailwind.config.js b/server/tailwind.config.js deleted file mode 100644 index babe27ef..00000000 --- a/server/tailwind.config.js +++ /dev/null @@ -1,7 +0,0 @@ -module.exports = { - content: ["./vbv_lernwelt/**/*.{html,js}"], - theme: { - extend: {}, - }, - plugins: [], -} diff --git a/server/vbv_lernwelt/static/js/project.js b/server/vbv_lernwelt/static/js/project.js deleted file mode 100644 index d26d23b9..00000000 --- a/server/vbv_lernwelt/static/js/project.js +++ /dev/null @@ -1 +0,0 @@ -/* Project specific Javascript goes here. */ diff --git a/server/vbv_lernwelt/static/sass/project.scss b/server/vbv_lernwelt/static/sass/project.scss deleted file mode 100644 index 5e5e574b..00000000 --- a/server/vbv_lernwelt/static/sass/project.scss +++ /dev/null @@ -1,4 +0,0 @@ -.task.htmx-swapping { - opacity: 0; - transition: opacity 1s ease-out; -} diff --git a/tailwind.config.js b/tailwind.config.js new file mode 100644 index 00000000..d1a6cdf4 --- /dev/null +++ b/tailwind.config.js @@ -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: [], +} diff --git a/server/vbv_lernwelt/static/tailwind/input.css b/tailwind/input.css similarity index 100% rename from server/vbv_lernwelt/static/tailwind/input.css rename to tailwind/input.css