brocessing / kirby-webpack Goto Github PK
View Code? Open in Web Editor NEW:muscle: A Kirby CMS starter-kit with modern frontend tools
License: MIT License
:muscle: A Kirby CMS starter-kit with modern frontend tools
License: MIT License
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
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.
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',
}
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:
{ "modules": { "core": "https://github.com/getkirby-v2/kirby.git", "panel": "https://github.com/getkirby-v2/panel.git", .....
$npm run kirby:update -- --force
, or if you use yarn $yarn kirby:update --force
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.
kirby-webpack.php
to index.php
kirby.config.json
to disable your kirby plugin managerbut 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.
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:
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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.