brocessing / kirby-webpack Goto Github PK

would love to have a semver check in kirby.config.json like yarn.lock or package.json do. because auto updating a plugin might break things and without a proper way to fix that apart from removing the package from your kirby package manager and adding a version manually.

I'm running dev server and my page is reloaded every 3second without any changes when I have also open panel.

Thanks

Hi,

It seems the project is no longer maintained :(
You should mention it in the readme as it won't work with Kirby 3.

could add opn to open localhost in default browser. like done here:

https://github.com/vuejs-templates/pwa/blob/development/template/build/dev-server.js#L81

will definitivly check it out asap. <3

you could provide a eslintrc.js file with this repo.

also there are Gratuitous parentheses around expression: no-extra-parens here...
https://github.com/brocessing/kirby-webpack/blob/master/scripts/webpack-build.js#L27
https://eslint.org/docs/2.0.0/rules/no-extra-parens

When I navigate to a route or page that doesn't exist I get a 200 response - successfully receiving a blank page when I should be receiving a 404.

Since version 0.1.0 JS code is never executed (it works just fine in development), though the bundle.js looks okay-ish. Maybe webpack modules are not loaded for some reason?

Loving this, thank you for creating it. Has sped up my workflow immensely.

In the past I've used FTP to update my live site, but I'd really love to be able to deploy using git from the command line. I know how to deploy a complete git repo, but is there an easy setup to deploy only the contents of the www folder?

Can be done via kirby:add and kirby:update scripts

Kirby 2.5.8 (multilingual setup)
kirby-webpack 0.7.0

Error from console: Uncaught SyntaxError: Unexpected identifier in browser-sync-client.js?v=2.23.5:16

I'm using proxy...

Thanks

If you want to split up your code into .js-modules only the dev server will show the imported .sccs changes. After the build, no .css settings of the module will be imported in the bundle.css file ... Worked in the Kirby 2 repro, only.

Would it be possible to add plugins to .gitignore configurable?
I don't think everyone is using CI.

What do you think?

Hi there! I just upgraded my site to Kirby 3.6.0 and the frontend is working fine, however I get a blank page when trying to visit the panel. The console error message reads:

DOMException: Failed to execute 'pushState' on 'History': A history state object with URL 'http://localhost:35411/panel/site' cannot be created in a document with origin 'http://localhost:8080' and URL 'http://localhost:8080/panel/site'.

    at Object.setState (http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/index.js:1:14524)
    at Object.init (http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/index.js:1:12871)
    at a.created (http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/index.js:1:14845)
    at Vt (http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/vendor.js:6:11291)
    at nn (http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/vendor.js:6:25303)
    at a.Cn._init (http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/vendor.js:6:32894)
    at new a (http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/vendor.js:6:30461)
    at http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/vendor.js:6:19454
    at init (http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/vendor.js:6:19485)
    at http://localhost:8080/media/panel/84e399b8f2181ccd73394fdeddff1638/js/vendor.js:6:56812

Am unfortunately not skilled enough to know how to read this and what to do. Any pointers? Thanks in advance!

After not using it for a while, the start script throws the following error:

[email protected] start /Volumes/Daten/SITES/karinkirby
node scripts/check-preprocessor.js && cross-env NODE_ENV=development node scripts/webpack-serve.js

[1/3] Starting a php server...
[PHP] 💥 Error: php is not a php binary.
[?] Valid path or command for php:

The path from "which php" didn't work,

thx!

👋
I am using kirby-webpack with Kirby CMS 3 now and it works great, but there is a problem with the development server.

• When i upload an image to the panel, the image does not show in the preview/thumbnail.
• I get this error when using the kirby-builder plugin
  

After the npm run build process and starting the build in PHP server php -S localhost:8000 kirby/router.php everything works. The images are there and even the plugin works.

So I tried to install the Kirby routing in the development server but failed.

phpServer = php({ bin: user.devServer.phpBinary || 'php', host: user.devServer.phpHost || 'localhost', root: user.paths.www, verbose: false, promptBinary: true, args, router: user.paths.kirby.core + '/router.php' // Kirby routing })

Am i missing something here?
Thank you very much!

I'm not sure if this is related to kirby webpack but the fact is that I can’t upload files using the files field through the panel. It throws an error : “None of the converters in the stack are operational”.

The files are correctly uploaded in the content>page folder but not in the media folder. In the panel, the field keeps being empty. In the text file (data), the array corresponding to the field is also empty.

When I run npm run start I'm getting the following error and it's asking me to type in a 'Valid path or command for php'.

[PHP] Error: php is not a php binary
[?] Valid path or command for php:

I believe this maybe be a consequence of running brew upgrade node for a problem in another project. How can I correct this problem? Any help would be greatly appreciated

when creating a bundle entry in main.config.js it would be nice to be able use same file again and bundle it in multiple different output. like reusing _fonts.css in following example...

const entries = {
  'src/main.js':     'www/assets/main.min.js',
  'src/_fonts.css':  'www/assets/a.css', // reuse. does not work (yet).
  'src/_a.css':      'www/assets/a.css',
  'src/_fonts.css':  'www/assets/b.css', // only last call will work.
  'src/_b.css':      'www/assets/b.css',
}

I'm having an issue trying to setup the kirby 3 branch from scratch. It works fine on mac, but on windows 10 I'm receiving the error below:

mb_strpos(): Empty delimiter

Hi, my assets folder setup is like this:

assets
├── builds/
│   ├── bundle.css
│   ├── bundle.js
│   └── ...
└── fonts/
    └── fontfiles ...

in my css I am linking to url('../fonts/fontfiles')

after running npm run start i get the error Module not found: Error: Can't resolve ...
but if i run npm run build the font is loaded correctly. but on the dev server it won't work.

it is exactly setup like a previous project and it works fine there

Looks like including modules is broken:
In InteractiveTitle.js I have:
class InteractiveTitle {
constructor () {
}
}
export default InteractiveTitle

in my index.js I try to include this module:
import InteractiveTitle from './js/objects/InteractiveTitle'

That leads to
Module not found: Error: Can't resolve '@babel/runtime/helpers/classCallCheck'
Module not found: Error: Can't resolve '@babel/runtime/helpers/createClass'

Kirby's Repos have changed since the release of V3. The "legacy" v2 versions are now on: https://github.com/getkirby-v2

What most likely will happen: If you run '$yarn start' or $npm run start - Kirby and Panel will be updated to V3 and nothing will work any more :)

So, to use your existing Kirby 2 Setup with kirby-webpack, do the following:

1. Change the repo urls inside kirby.config.json:
   { "modules": { "core": "https://github.com/getkirby-v2/kirby.git", "panel": "https://github.com/getkirby-v2/panel.git", .....
2. Run either $npm run kirby:update -- --force, or if you use yarn $yarn kirby:update --force
3. Voilà! :)

Hi, kirby was recently updated to 2.5.8 but when I run:
npm run kirby:update

I get:
🕛 [Kirby Updater] Nothing to update.

and on the panel still says Kirby version: 2.5.7

thanks.

Currently BrowserSync is set up to ignore files in the 'content' directory. If this were to be removed, you would get live updates when the content is edited. I can't see any downsides to it, but maybe I am missing something.

I am fooling around with kirby next and your awsome kirby-webpack (version pre-release 0.8.0). this is what i did.

• got alpha-9 code from slack-channel/notion (kirby next Kirby 3 fellowship package required for access) and used these files (kirby, panel, content,...)
• needed to rename the plugin file from kirby-webpack.php to index.php
• and removed all modules from kirby.config.json to disable your kirby plugin manager

but i am stuck at getting browsersync to work. it gets loaded but does not use the hot-reload files but plain css/js files.

probably since i can not set the url in kirby next config (yet, since c helper class does not exist anymore). but maybe thats not necessary with kirby next's new server classes.

i hope you can give me a pointer how to solve this. thanks.

Great work on the starterpack!
I noticed, you didn't managed to get JSON content representations working with the dev server either.. any idea whats the problem? I guess it has something to do with dots in urls.. would love to fix this!

Since version 0.10 sourcemaps instead of being built as separate .map files are embeded into the file itself expading its size considerably. This IMO ought to be reverted to previous behavior (for production builds at least).

npm install finds a vulnerability that requires manual review and cannot be updated by npm audit fix.

npm audit yields:

                       === npm audit security report ===                        
                                                                                
┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ Low           │ Regular Expression Denial of Service                         │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ debug                                                        │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >= 2.6.9 < 3.0.0 || >= 3.1.0                                 │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ browser-sync [dev]                                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ browser-sync > localtunnel > debug                           │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://nodesecurity.io/advisories/534                       │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 low severity vulnerability in 7697 scanned packages
  1 vulnerability requires manual review. See the full report for details.

The compilation of one project takes me even 15s.
Can I make a mistake somewhere?

Thanks

Hello!

I am using the great kirby-webpack with a gia-setup which is outputting JS-chunks into the root dist folder (www) and not into www/assets with all the other js-bundles. Any idea why that might be and how I could fix it?

Any help is greatly appreciated!

Since version 0.10, after issuing npm run build command I've noticed there are leftover files being left in www/ folder (styles.1.chunk.js, styles.css).

hi!
Thanks for your great work. Just want to use it under macOS Big Sur but the php server could not start.
[1/3] Starting a php server...
[PHP] 💥 Error: php is not a php binary.

On macOS Catalina it works!

Hey, thanks for your great work. I got a little optimization request:
The CSS Sourcemap Reference in Chrome is the whole path like "/Users/Me/Sites/project-name/src/scss/common/_global.scss".
So sometimes the important last part "/common/_global.scss" gets cutted out because of the long path name. Is it possible to get a shortened Version of the path?
Thank you.

i did run into an issue with yarn after unboiling kirby-webpack 0.8.

yarnpkg/yarn#5727 (comment)

had to do this

rm yarn.lock
yarn install

when an error is thrown by webpack compiler it would be nice to continue using dev server once the broken file (cs/js whatever) is changed – on browser sync event. currently one has to ctrl-c and npm run dev again.

you could switch from object to array notation in postcss. this makes it easier to add other plugins imho.
and use the (recommended) browserlist entry in package.json.

https://github.com/ai/browserslist#packagejson
https://github.com/postcss/autoprefixer#browsers

package.json

...
  "browserslist": [
    "last 2 versions"
  ],
...

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer') // using browserlist
  ]
}

As stated in the title.
I wanted to start working on a new project, cloned this project and installed all the dependencies via npm install. Now when I log in to the panel, it just loads forever. Using Dev Tools I see that the most of the panel assets (css, js, fonts, img) aren't loading. Any Idea what might be causing this?

As you can see in the screenshot some of the CSS files are being loaded, some aren't. Very strange.

I got this error from a fresh install. I'm not entirely sure what's going on. I assume it has something to do with the config file and this https://getkirby.com/docs/reference/system/options/url#url-allowlist

When having a clean install of 'kirby-webpack' (+ onboil 👀) on Mac OSX the /panel keeps redirecting back to the current page. No errors are shown except the warning:

⚠  Warning: 
Node can't reach PHP built-in server through localhost.
Proxying [::1]:35411 instead.

This warning was explained in this closed issue, so that isn't the problem I guess.

While working with this setup, I find myself having to dig for directories like content / site, which I use often when developing a site.

Also it feels like there are a lot of config files in the root, which I won't be using very often.

I was wondering if a file layout like this might make sense:

• config
  • kirby.config.json
  • main.config.js
  • postcss.config.js
  • webpack.config
• content
  • content files for kirby
• site
  • kirby site
• src
  • javascript files
• style
  • sass / less files
• www
  • assets
  • panel
  • kirby
  • thumbs

How difficult would it be to implement a hash generation for production assets?

Thanks

npm run kirby:update won't work anymore.

🕛  [Kirby Updater] Nothing to update.
 ↪ unchanged https://github.com/getkirby/kirby.git

It still says I run Kirby 3.3.3, while 3.4.2 was released a few days ago.

Hi,

the initial setup only displays a blank page and the browser timeouts while loading. The only solution I found is to use my own local proxy (via proxy setting in main.config.js).

Is there anything I could try?

System: Mac OS 10.13.4

Thanks!

Hello there,

When on the checkout page using the Merx Plugin, the browser keeps reloading infinitely. Maybe anyone knows where the problem may be, but for right now, it would be easier to just disable the automatic browser reload. Is there a way to do that?

First of all, thank you for this great boilerplate. The plugin kirby-typography doesn't seem to work inside kirby-webpack . Is there any fix or possible reason?

I get a 404 when trying to access urls like localhost:8080/foo.bar/.

I've found some links about disabling the dot rule in the devserver here but I can't find information about how to implement this in the php server...

Any Ideas ?

Hello everyone,
I've tried to install kirby-webpack on my local Ubuntu 16.04 with following setup:
PHP 7.2.2
node.js 7.10.1
npm 4.20

I get the following error message:
$ npm run start
> [email protected] start /home/xxx/
> node scripts/check-preprocessor.js && cross-env NODE_ENV=development node scripts/webpack-serve.js

[1/3] Starting a php server...
PHP Server started on localhost:35410

⚠️ Warning:
Node can't reach PHP built-in server through localhost.
Proxying [::1]:35410 instead.

[2/3] Running the webpack compiler...
webpack building...
webpack built 932b8f65491bcf8c154b in -9949ms
ℹ ｢wdm｣: Version: webpack 3.11.0
Asset Size Chunks Chunk Names
assets/bundle.css 292 kB 0 [emitted] [big] assets/bundle.css
assets/bundle.js 244 kB 1 [emitted] assets/bundle.js
ℹ ｢wdm｣: Compiled successfully.

[3/3] Starting the browser-sync server...
[Browsersync] Proxying: http://[::1]:35410
[Browsersync] Access URLs:
--------------------------------------
Local: http://localhost:8081
External: http://x.x.x.x:8081
--------------------------------------
UI: http://localhost:3001
UI External: http://x.x.x.x:3001
--------------------------------------
[Browsersync] Watching files...

✔︎ Success: kirby-webpack server is up and running

Ports aren't in use through other services. Anyone have these problems to or someone can give me a hint?

Hi i am able to load this font file in my dev environment but when i move to production i get a 404. I'm not sure what to do. By the way I changed my css preprocessor to SASS.

@font-face
  font-family: favorit
  src: url("/assets/fonts/fl.woff2") format('woff2')
  src: url("/assets/fonts/fl.woff") format('woff')
  src: url("/assets/fonts/fl.ttf") format('truetype')
  font-weight: 300
  font-style: normal
  font-display: fallback