lukeed / preact-starter Goto Github PK

View Code? Open in Web Editor NEW

384.0 8.0 36.0 698 KB

Webpack3 boilerplate for building SPA / PWA / offline front-end apps with Preact

Home Page: https://preact-starter.now.sh/

License: MIT License

JavaScript 69.35% HTML 6.99% CSS 23.66%

webpack boilerplate preact offline pwa spa progressive-web-app starter-kit webpack3

preact-starter's People

Contributors

Stargazers

Watchers

preact-starter's Issues

props and states

Hey looked I'm confused here,

I want to pass states as props here, but I couldn't figure out how can I transform function to class. Any little help?

TypeError: history.listen is not a function

Uncaught TypeError: history.listen is not a function
    at Object../src/index.js (app.e72e671….js:1)
    at n (vendor.e72e671….js:1)
    at window.webpackJsonp (vendor.e72e671….js:1)
    at app.e72e671….js:1

Is this because of my setup? I used yarn instead of npm

npm install fails; obsolete packages, missing python2

Just tried to set this up on macOS 13.0.1 and got a whole heap of errors and warnings :( Looks like a bunch of the dependencies are rev-locked to obsolete versions, and also something wants to run python2 which is no longer provided on macOS (and I would rather not install it since it’s EOL.)

I’m sure this would be easy for me to work around if I were savvy with npm, but I’m not.

$  npm i                                                    in ~/Projects/tmp/preact-starter-master
npm WARN EBADENGINE Unsupported engine {
npm WARN EBADENGINE   package: '[email protected]',
npm WARN EBADENGINE   required: { node: '>=0.10.0 <7' },
npm WARN EBADENGINE   current: { node: 'v18.11.0', npm: '8.19.2' }
npm WARN EBADENGINE }
npm WARN deprecated [email protected]: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
npm WARN deprecated [email protected]: Please use the native JSON object instead of JSON 3
npm WARN deprecated [email protected]: Chokidar 2 will break on node v14+. Upgrade to chokidar 3 with 15x less dependencies.
npm WARN deprecated [email protected]: This version of 'buffer' is out-of-date. You must update to v4.9.2 or newer
npm WARN deprecated [email protected]: This is probably built in to whatever tool you're using. If you still need it... idk
npm WARN deprecated [email protected]: Please update to ini >=1.3.6 to avoid a prototype pollution issue
npm WARN deprecated [email protected]: Please migrate to Workbox: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw
npm WARN deprecated [email protected]: Please migrate to Workbox: https://developers.google.com/web/tools/workbox/guides/migrations/migrate-from-sw
npm WARN deprecated [email protected]: This module moved to @hapi/sntp. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: This module moved to @hapi/hawk. Please make sure to switch over as this distribution is no longer supported and may contain bugs and critical security issues.
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: update to [email protected]
npm WARN deprecated [email protected]: flatten is deprecated in favor of utility frameworks such as lodash.
npm WARN deprecated [email protected]: This SVGO version is no longer supported. Upgrade to v2.x.x.
npm WARN deprecated [email protected]: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142
npm WARN deprecated [email protected]: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.
npm WARN deprecated [email protected]: Legacy versions of mkdirp are no longer supported. Please update to mkdirp 1.x. (Note that the API surface has changed to use Promises in 1.x.)
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: out of support
npm WARN deprecated [email protected]: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
npm WARN deprecated [email protected]: babili has been renamed to babel-minify. Please update to babel-preset-minify
npm WARN deprecated [email protected]: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update!
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: This version has been deprecated in accordance with the hapi support policy (hapi.im/support). Please upgrade to the latest version to get the best features, bug fixes, and security patches. If you are unable to upgrade at this time, paid support is available for older versions (hapi.im/commercial).
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm WARN deprecated [email protected]: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
npm notice 
npm notice New major version of npm available! 8.19.2 -> 9.1.2
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.1.2
npm notice Run npm install -g [email protected] to update!
npm notice 
npm ERR! code 1
npm ERR! path /Users/snej/Projects/tmp/preact-starter-master/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c -- node scripts/build.js
npm ERR! Building: /opt/homebrew/Cellar/node/18.11.0/bin/node /Users/snej/Projects/tmp/preact-starter-master/node_modules/node-gyp/bin/node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli   '/opt/homebrew/Cellar/node/18.11.0/bin/node',
npm ERR! gyp verb cli   '/Users/snej/Projects/tmp/preact-starter-master/node_modules/node-gyp/bin/node-gyp.js',
npm ERR! gyp verb cli   'rebuild',
npm ERR! gyp verb cli   '--verbose',
npm ERR! gyp verb cli   '--libsass_ext=',
npm ERR! gyp verb cli   '--libsass_cflags=',
npm ERR! gyp verb cli   '--libsass_ldflags=',
npm ERR! gyp verb cli   '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | darwin | arm64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:207:21)
npm ERR! gyp verb `which` failed  python2 Error: not found: python2
npm ERR! gyp verb `which` failed     at getNotFoundError (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:207:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb `which` failed Error: not found: python
npm ERR! gyp verb `which` failed     at getNotFoundError (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:207:21)
npm ERR! gyp verb `which` failed  python Error: not found: python
npm ERR! gyp verb `which` failed     at getNotFoundError (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:13:12)
npm ERR! gyp verb `which` failed     at F (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:68:19)
npm ERR! gyp verb `which` failed     at E (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:80:29)
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:89:16
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/index.js:42:5
npm ERR! gyp verb `which` failed     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/mode.js:8:5
npm ERR! gyp verb `which` failed     at FSReqCallback.oncomplete (node:fs:207:21) {
npm ERR! gyp verb `which` failed   code: 'ENOENT'
npm ERR! gyp verb `which` failed }
npm ERR! gyp ERR! configure error 
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack     at PythonFinder.failNoPython (/Users/snej/Projects/tmp/preact-starter-master/node_modules/node-gyp/lib/configure.js:483:19)
npm ERR! gyp ERR! stack     at PythonFinder.<anonymous> (/Users/snej/Projects/tmp/preact-starter-master/node_modules/node-gyp/lib/configure.js:397:16)
npm ERR! gyp ERR! stack     at F (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:68:16)
npm ERR! gyp ERR! stack     at E (/Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:80:29)
npm ERR! gyp ERR! stack     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/which/which.js:89:16
npm ERR! gyp ERR! stack     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/index.js:42:5
npm ERR! gyp ERR! stack     at /Users/snej/Projects/tmp/preact-starter-master/node_modules/isexe/mode.js:8:5
npm ERR! gyp ERR! stack     at FSReqCallback.oncomplete (node:fs:207:21)
npm ERR! gyp ERR! System Darwin 22.1.0
npm ERR! gyp ERR! command "/opt/homebrew/Cellar/node/18.11.0/bin/node" "/Users/snej/Projects/tmp/preact-starter-master/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd /Users/snej/Projects/tmp/preact-starter-master/node_modules/node-sass
npm ERR! gyp ERR! node -v v18.11.0
npm ERR! gyp ERR! node-gyp -v v3.6.2
npm ERR! gyp ERR! not ok 
npm ERR! Build failed with error code: 1

[Suggestion] - add svg sprite loader

First off, great project - thanks 🥇

Its really nice to work with the svg-sprite-loader for icons instead of fonts, now we have killed support for IE8 by going down the preact lane anyway 👍

adding google maps preact way

hi,
I'm looking for google maps component but I don't know know how to write preact way.
I liked your ganalytics package, however I couldn't read how can I build like this.

any idea?

fix: webpack config is using undefined variable.

User Story

Given that the repository is checked in the `master` branch,
And there is no changes,
And the dependencies are installed,
When I run `npm run build`,
It should build the project into the `./dist` folder.

Actual output of `npm run build`

[armando:~/Projects/node-sped-client]$ npm run build                                                                                                                                                                                                               (master✱) 

> [email protected] build /Users/armando/Projects/node-sped-client
> webpack --env.production --config config/webpack

/Users/armando/Projects/node-sped-client/config/webpack.js:20
			path: out,
			      ^

ReferenceError: out is not defined
    at module.exports.env (/Users/armando/Projects/node-sped-client/config/webpack.js:20:10)
    at requireConfig (/Users/armando/Projects/node-sped-client/node_modules/webpack/bin/convert-argv.js:102:15)
    at /Users/armando/Projects/node-sped-client/node_modules/webpack/bin/convert-argv.js:109:17
    at Array.forEach (native)
    at module.exports (/Users/armando/Projects/node-sped-client/node_modules/webpack/bin/convert-argv.js:107:15)
    at Object.<anonymous> (/Users/armando/Projects/node-sped-client/node_modules/webpack/bin/webpack.js:153:40)
    at Module._compile (module.js:573:32)
    at Object.Module._extensions..js (module.js:582:10)
    at Module.load (module.js:490:32)
    at tryModuleLoad (module.js:449:12)
    at Function.Module._load (module.js:441:3)
    at Module.runMain (module.js:607:10)
    at run (bootstrap_node.js:382:7)
    at startup (bootstrap_node.js:137:9)
    at bootstrap_node.js:497:3

npm ERR! Darwin 16.4.0
npm ERR! argv "/Users/armando/.nvm/versions/node/v7.0.0/bin/node" "/Users/armando/.nvm/versions/node/v7.0.0/bin/npm" "run" "build"
npm ERR! node v7.0.0
npm ERR! npm  v4.1.2
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `webpack --env.production --config config/webpack`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script 'webpack --env.production --config config/webpack'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the preact-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     webpack --env.production --config config/webpack
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs preact-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls preact-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /Users/armando/Projects/node-sped-client/npm-debug.log

Solution

Since a const dist is defined in https://github.com/lukeed/preact-starter/blob/master/config/webpack.js#L5, we can either change https://github.com/lukeed/preact-starter/blob/master/config/webpack.js#L20 from:

  path: out,

  path: dist

or simply rename the const to out.

Preact Starter & Firebase

Hi, I'm using Preact with Firebase on this site; loyaltyim-dev.firebaseapp.com
It's working on Firefox but not working well with Chrome and other browsers. Do you have any idea?
Should I add polyfill or something?

Update changes not working

Hi,

I've been through preact-starter to learn more about PWA. I want to see how the cache-busting and the pwa will update my changes.
I've set up an heroku app based on the preact starter repo code, then I'm trying to change some text within the home page and pushing my changes:

On my chrome browser the updated version is never shown it's like the cache is no updating at all, even after a page refresh (I have to clear site data to see the latest version). When I'm going through my files on the server: heroku run bash > cat home.js, I can see the component is up to date, like on my local, but the page is not showing the latest version.
On an Android phone (still using chrome), if I refresh the PWA, I can see the updated text on the home page but I was thinking the 'cache busting' should handle update, without the need to refresh manually the page by the user ?

Just wanted to double check with you if you have any thoughts about my current issues, I'm definitely missing something, but can't figure out where.

heroku: preact-starter
git: test-preact-starter

Thanks for your time,
Alex.

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.