accordbox / python-webpack-boilerplate Goto Github PK

View Code? Open in Web Editor NEW

148.0 11.0 17.0 2.9 MB

Django Webpack boilerplate & Flask Webpack boilerplate

Home Page: https://python-webpack-boilerplate.rtfd.io

License: MIT License

Makefile 0.83% JavaScript 25.05% SCSS 0.57% Python 72.18% HTML 1.37%

django flask webpack boilerplate webpack-boilerplate react vue

python-webpack-boilerplate's People

Contributors

Stargazers

Watchers

Forkers

annasmbr tspng tetsumote danhayden cjkpl ladet02 adamchainz pyshawon filipwozniak lynxye oinoice sharedgoals franciscobmacedo alfonsrv bobpx5 schulzjo charithmadhuranga

python-webpack-boilerplate's Issues

Update doc to auto refresh page when developing

  devServer: {
    inline: true,
    hot: true,
    host: "0.0.0.0",
    port: 9091,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    writeToDisk: true,
    contentBase: Path.join(__dirname, '../../django_app'),
    watchContentBase: true,
  },

Add your project to the asset-managers Grid in djangopackages

Hi,

I think it would make sense to add your package here: https://djangopackages.org/grids/g/asset-managers/

Webpack Error ?

Im trying to use thois this with tailwind and Im getting this error

ERROR in ./src/styles/index.scss (./src/styles/index.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles/index.scss)
Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
/home/ladet/dev/ladetme/frontend/node_modules/postcss-import/index.js:45
      if (styles.source?.input?.file) {
                        ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/postcss.config.js:11:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
 @ ./src/styles/index.scss
 @ ./src/application/app.js 2:0-30

ERROR in ./src/styles/index.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
/home/ladet/dev/ladetme/frontend/node_modules/postcss-import/index.js:45
      if (styles.source?.input?.file) {
                        ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/postcss.config.js:11:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at tryRunOrWebpackError (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/HookWebpackError.js:88:9)
    at __webpack_require_module__ (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5049:12)
    at __webpack_require__ (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5006:18)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5077:20
    at symbolIterator (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3485:9)
    at done (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3527:9)
    at Hook.eval [as callAsync] (eval at create (/home/ladet/dev/ladetme/frontend/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:13:1)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:4984:43
    at symbolIterator (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3482:9)
    at timesSync (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:2297:7)
-- inner error --
Error: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
/home/ladet/dev/ladetme/frontend/node_modules/postcss-import/index.js:45
      if (styles.source?.input?.file) {
                        ^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:915:16)
    at Module._compile (internal/modules/cjs/loader.js:963:27)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/postcss.config.js:11:5)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!/home/ladet/dev/ladetme/frontend/node_modules/postcss-loader/dist/cjs.js!/home/ladet/dev/ladetme/frontend/node_modules/sass-loader/dist/cjs.js!/home/ladet/dev/ladetme/frontend/src/styles/index.scss:1:7)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/javascript/JavascriptModulesPlugin.js:441:11
    at Hook.eval [as call] (eval at create (/home/ladet/dev/ladetme/frontend/node_modules/tapable/lib/HookCodeFactory.js:19:10), <anonymous>:5:1)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5051:39
    at tryRunOrWebpackError (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/HookWebpackError.js:83:7)
    at __webpack_require_module__ (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5049:12)
    at __webpack_require__ (/home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5006:18)
    at /home/ladet/dev/ladetme/frontend/node_modules/webpack/lib/Compilation.js:5077:20
    at symbolIterator (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3485:9)
    at done (/home/ladet/dev/ladetme/frontend/node_modules/neo-async/async.js:3527:9)

Generated code for /home/ladet/dev/ladetme/frontend/node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!/home/ladet/dev/ladetme/frontend/node_modules/postcss-loader/dist/cjs.js!/home/ladet/dev/ladetme/frontend/node_modules/sass-loader/dist/cjs.js!/home/ladet/dev/ladetme/frontend/src/styles/index.scss
1 | throw new Error("Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):\n/home/ladet/dev/ladetme/frontend/node_modules/postcss-import/index.js:45\n      if (styles.source?.input?.file) {\n                        ^\n\nSyntaxError: Unexpected token '.'\n    at wrapSafe (internal/modules/cjs/loader.js:915:16)\n    at Module._compile (internal/modules/cjs/loader.js:963:27)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)\n    at Module.load (internal/modules/cjs/loader.js:863:32)\n    at Function.Module._load (internal/modules/cjs/loader.js:708:14)\n    at Module.require (internal/modules/cjs/loader.js:887:19)\n    at require (internal/modules/cjs/helpers.js:74:18)\n    at Object.<anonymous> (/home/ladet/dev/ladetme/frontend/postcss.config.js:11:5)\n    at Module._compile (internal/modules/cjs/loader.js:999:30)\n    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)");
 @ ./src/application/app.js 2:0-30

ERROR in src/styles/index.scss
 12:193  ✖  Expected line length to be no more than 120 characters  max-line-length                 
 12:195  ✖  Unexpected missing end-of-source newline                no-missing-end-of-source-newline

webpack 5.70.0 compiled with 3 errors in 2326 ms

bump cookiecutter version >=2.1.1

2.1.1

The package cookiecutter before 2.1.1 is vulnerable to Command Injection via hg argument injection. When calling the cookiecutter function from Python code with the checkout parameter, it is passed to the hg checkout command in a way that additional flags can be set. The additional flags can be used to perform a command injection.

Update doc talking about browserslist

Update doc to use pathlib instead of os.path

Multiple javascript_pack-tags trigger second script twice

Problem
I have a body.html which uses {% javascript_pack 'main-bundle' attrs='charset="UTF-8"' %}

and a detail.html which uses {% javascript_pack 'detail' attrs='charset="UTF-8"' %}
it also extends with {% extends 'body.html' %}

This causes 'detail.js' to be called twice.

It works if i use {% javascript_pack 'main-bundle' 'detail' attrs='charset="UTF-8"' %} in body.html, but now i load unnessessary js-code.

Reproduce
Use this:
{% javascript_pack 'main-bundle' attrs='charset="UTF-8"' %} {% javascript_pack 'detail' attrs='charset="UTF-8"' %}
with simple debug line each:
console.log("DEBUG-"+(new Date()).getTime());
You will see 3 console-lines instead of 2.

Question
Am i supposed to only use javascript_pack once?

Carousel slide does not work

Thanks for this excellent library. Most of it works like a charm.

While trying out its functionalities i could not get the Carousel to slide either automatically or by pressing the previous or next buttons. i have checked my page source and the included javascript files are loading correctly in the the template.

I don't know if I'm missing something or if this is a bug? Any help will be appreciated

Cheers

Upload frontend_templates to Pypi

[question] why shd I use this instead of django-webpack-loader

Sorry I am curious

But as a django dev why is this better or more suited for me if I want to use webpack in my dockerized django project compared with django-webpack-loader?

`Webpack` Error During `Tailwind` Configuration

I believe it's related to #36, and I think the issue left unresolved.

I get exactly the same error message as @Ladet02.

I've installed Wagtail with "npm command at frontend directory" setup, enabled live reloading feature and I get the following error trying to configure Tailwind:

I've checked all the steps provided here like a million times.

[Question] can this be used with asset managers such as django-compressors

there's a big list https://djangopackages.org/grids/g/asset-managers/

and I am looking at https://django-compressor.readthedocs.io/en/stable/

Can this be used with any of these or it's competing for the same job?

Change nvmrc to Fermium

Create empty frontend/build directory to resolve warning in debug_toolbar

Problem with `webpack-cli` & Live Reload Feature

I followed the instructions about live reloading (reading "Live Reload" chapter) whilst trying to implement that feature in brand new Django/Wagtail/Vue/Webpack applications, but after executing npm run start, I keep getting the same error message.

devServer: {
  host: "0.0.0.0",
  port: 9091,
  headers: {
      "Access-Control-Allow-Origin": "*",
  },
  writeToDisk: true,
  watchFiles: [
      Path.join(__dirname, '../../gphn/**/*.py'),
      Path.join(__dirname, '../../gphn/**/*.html'),
  ]
}

System: MacOS Monterey
Version of npm: 8.1.2
Version of Node: 16.13.2

"webpack": "^5.50.0",
"webpack-cli": "^4.7.2",
"webpack-dev-server": "^3.11.2"

Am I overlooking something very obvious?

Update doc about `inline-cheap-source-map` in React project

Fixed in 85a6041

TODO: Render hash version static assets in Django

So it can work better with Whitenoise

Add option to allow user to create `package.json` at the root directory

Update webpack.common.js
Update package.json
Use post-generate to move the frontend config files from frontend directory to root directory.
Add notes to Doc

Problem with Executing `npm run build` Using `esbuild` & `Node` 17.6.0 - "The Callback Was Already Called"

I regularly configure the project using "Python Webpack Boilerplate" guide. More specifically, I install Wagtail (Django), run npm command at frontend directory, enable live reloading feature, import Vue and also enable esbuild. I have always used Node 14.19.0, but lately thought to give you a chance of a newer version - 17.6.0. At the time of executing npm run build command, I get the following error:

/Users/filip/Desktop/dj-wgt/wgt/frontend/node_modules/loader-runner/lib/LoaderRunner.js:119
			throw new Error("callback(): The callback was already called.");
			      ^
Error: callback(): The callback was already called.
    at context.callback (/Users/filip/Desktop/dj-wgt/wgt/frontend/node_modules/loader-runner/lib/LoaderRunner.js:119:10)
    at Object.ESBuildLoader (/Users/filip/Desktop/dj-wgt/wgt/frontend/node_modules/esbuild-loader/dist/loader.js:62:9)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

I don't use Docker. I use Python 3.9.0, though.

Any ideas how to solve this issue?

Enhancing `python-webpack-boilerplate` with `HTMX` and `Alpine.js`

Are you planning to add HTMX and Alpine.js to the python-webpack-boilerplate?

Honestly, only these two things are missing for the python-webpack-boilerplate to be a truly versatile and complete starting point for projects based on the latest technologies.

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.