lukeed / pwa Goto Github PK
View Code? Open in Web Editor NEW(WIP) Universal PWA Builder
Home Page: https://pwa.cafe
(WIP) Universal PWA Builder
Home Page: https://pwa.cafe
Stupid/simple ones at the very least.
Got caught up in making polished demos to match / build from the single-page scaffold.
So far Travis Ci is not setup.
Just officially released!
The React preset has a HMR
utility that skips the module.hot
and foo = render(.., foo)
juggling.
Think it'd be nice if can get the same utility in for Preact apps.
I want to upload assets after pwa build to s3 and use another domain as CDN. What's the best way to do this with pwa
? What would you suggest?
I'm not sure why the server started on port 36573 but somehow, it's connecting to 33435
I'm having this issue in container though, not on my local machine.
[PWA] Started local server on http://localhost:36573
(node:6) UnhandledPromiseRejectionWarning: Error: connect ECONNREFUSED 127.0.0.1:33435
at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1161:14)
(node:6) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:6) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled willterminate the Node.js process with a non-zero exit code.
Attach eslint-loader
safely, and expect config from .eslintrc
(default) or a eslint
config key.
.tsx?
as module extensionbabel-loader
for itselftypescript
config key?I think there may need to be separate @pwa/plugin-{preset}-typescript
plugins for (React/Vue/etc)-specific handling of TypeScript. Same goes with test suite(s).
Can easily check if the directory exists, and which files are in use within the tree (if any).
Can also output hash-based names for each asset... TBD
do i still need prerender-loader or defining export.routes
in pwa.config.js
already handle it when build?
I ran pwa init
and created a new React app. Then I ran pwa serve
which output:
λ pwa watch
[PWA] Applying preset: @pwa/preset-react
[PWA] Starting development server on http://localhost:8080
[PWA] Rebuilt in 4.77s
After I modified one of the React component, it said:
[PWA] File changed: src\components\App\index.js
[PWA] Rebuilt in 1.60s
And I saw this in the browser console:
[WDS] App updated. Recompiling...
[WDS] App hot update...
However the page wasn't hot-reloaded and I had to refresh to see the changes.
Is that expected?
Windows 10.0.17134.228
Firefox 61.0.2
Hello, I need to remove the css generating with a hash on the end of each element.
How can I do that? I already tried just pushing into the rules but still not subscribe, the classes are still generating with hashes.
Code:
config.module.rules.push({
test: /\.css$/,
loader: 'css-loader',
query: {
modules: true,
localIdentName: '[name]'
}
})
Print each [PWA] Wrote file: /contact/index.html
sequentially (in chain) rather than all at once.
With a --wait
timer, you can easily get 10+ seconds of what feels like unresponsiveness.
"pwa init" outputs the following:
These commands have been added to your package.json already.
We suggest you begin by typing:
$ cd pwareacttest
$ npm install
$ npm run watch
However, If I'm using Yarn, it should suggest Yarn rather than npm. A system that has Yarn might not even have npm installed. create-react-app
is an example of an app that detects if Yarn is being used.
i have this line in pwa.config.js
config.devServer.https = true
however, when i browse to https://localhost:8080
it shows ERR_SSL_PROTOCOL_ERROR
Do you have any idea why it happens? should i bring this to webpack devserver repo instead?
Add new @pwa/preset-polymer
package.
I'm super out of touch with Polymer world, so this will need some research.
i'm using a library and it requires me to load some css like this import 'react-day-picker/lib/style.css';
I'm using pwa with preact preset and sass. however, adding the above doesn't import the css for me.
I'm reading pwa/core but couldn't figure it out.
ServiceWorker already works thru manual webpack
config mgmt...
// pwa.config.js
const SWPrecache = require('sw-precache-webpack-plugin');
exports.webpack = function (config, env) {
if (env.production) {
config.plugins.push(
new SWPrecache({ ... })
);
}
}
... but it'd be nice to have this done automatically, just because the plugin(s) exist.
We have ESLint to lint JS. So we should have linter for CSS as well. The most popular CSS linter right now is Stylelint.
It also works with pure CSS, PostCSS extensions, SCSS, Less, even indented Sass and CSS-in-JS.
pwa build
is always set to production mode
suppose i want to do a development build with a different variable in DefinePlugin
of webpack. How can I do that?
if (production) {
config.plugins.push(
new webpack.DefinePlugin({
MY_API_URL: JSON.stringify('https://api.example.com')
})
)
}
else {
config.devServer.https = true
config.plugins.push(
new webpack.DefinePlugin({
MY_API_URL: JSON.stringify('https://devapi.example.com')
})
)
}
From what I observe, pwa export
will use chrome to pre-render all pages (default) with css classes and everything. So running critter after this point make more sense right?
Should only show certain choices within pwa init
based on certain pre-conditions:
Buble
in "Features" when preset == none
TSLint
in "Linter/Formatter" when TypeScript
selected> Blocked by terkelg/prompts#88
npm init
✔ Which framework would you like to use? › React
✔ Select features needed for your project: ›
✔ Directory to use … .
✔ Are you sure you want to write into the current directory? … no
✔ OK. Please provide another directory. … test
(node:9360) UnhandledPromiseRejectionWarning: Error: ENOENT: no such file or directory, scandir '~/.nvm/versions/node/v10.9.0/lib/node_modules/@pwa/cli/templates/assets'
Installation misses the following:
(manually copying them solves the issue)
node -v 10.9.0
npm -v 6.4.1
I got this issue with offline plugin. The link in the error recommends that i add this require('offline-plugin/runtime').install();
but i'm not sure where to add it .
OfflinePlugin: Plugin's runtime wasn't added to one of your bundle entries. See this https://goo.gl/YwewYp for details.
Followed setup instructions. Open localhost:8080 in browser and get 404.
Expose a --sourcemap
(and --no-sourcemap
) flag on pwa build
that configures mapping existence/type.
Available options are tied to Webpack's devtool
possibilities.
Right now, source-map
is the enforced option for production. It can be disabled already, but only thru webpack
config key:
// pwa.config.js
exports.webpack = function (config, env) {
if (env.production) {
config.devtool = false;
}
}
npm i -g @pwa/cli
or
yarn global add @pwa/cli
It's a bad idea to use "latest" in the generated package.json like this:
"dependencies": {
"ganalytics": "latest",
"react": "latest",
"react-dom": "latest",
"sirv-cli": "latest"
},
"devDependencies": {
"@pwa/cli": "latest",
"@pwa/preset-react": "latest"
}
In particular, React sometimes has breaking API changes between versions, so the example app may not even work properly if a new major version of React is released!
This should instead lock it down to the semver minor release range (eg. ~1.2.0
), and newer versions of pwa
could bump the dependency versions once it's determined that the demo apps still work fine with the new versions (or people could bump them manually)
Looking to build an svelte electron app without worrying much about config, thought this might be a good starting point, anyone tried it with electron yet or is it possible? Had it somewhat working but ran into issues with routing in the prod build.
Hi,
maybe I'm missing something, but on my system, with a fresh installation, running watch
always try to bind to localhost:80
(I see the debug message [PWA] Starting development server on http://localhost:80
.
I tried with pwa watch --port 9090
and with this pwa.config.js
in the root of the project:
config.devServer.port = 9090;
};```
My current setup:
OSX 10.10.5
node v8.11.0
npm 5.6.0
Thanks in advance!
Gennaro
Right now we have browsers
option in config. And we pas it to Babel and Autoprefixer.
Unfortunately, Babel and Autoprefixer are not the only Browserslist clients. optimize-css-assets-webpack-plugin
(CSS minifier which is used in this project) uses Browserslist too. Also there is many PostCSS plugins, ESLint plugins and Stylleint plugins, which use Browserslist too.
I think the only way here is to keep target browsers in standard place — .browserslistrc
or browserslist
key in package.json
.
Migration plan:
"browserslist": ["defaults"]
to package.json
generatorconfig.browsers
, which will ask users to move browsers.config.browsers
What do you think? Yeap, I know it is always bad news when cool API faced problems like this.
Add new @pwa/preset-angular
package.
I'm super out of touch with Angular, so this will need some research.
Because:
Uglify is no longer maintained
Babel@7 (#11) is our doorway into ESM builds
Bundles with ES2015+ output are already failing
Unfortunately, these dependencies are still using UglifyJS:
html-minify
(via html-webpack-plugin
) ~> [email protected]
webpack@4
~> [email protected]
❗️sw-precache-webpack-plugin
~> [email protected]
Nitpick, but getting tired of webpack-format-messages
formatting. Would much rather something more elegantly formatted & trimmed.
Applies to watch
and build
outputs.
I'd like to tranlate :)
Currently the presets use direct assign, I think adding webpack-chain might make it even more reliable?
Right now pwa export
exports to an absolute path (root). Which config do I need to generate relative paths?
As the title says: When adding just 'LESS' as pre-processor option - the compile fails. (I didn't select any other option)
Hello everyone,
I'm trying an experiment with React and I've changed the src
folder to:
assets/
js/
styles/
index.html
index.js
The main reason of this is that I wanted to separate styles from javascripts, but now, the only way I can find my files, is using relative path ../styles/component/index.scss
...
I already tried to do this on pwa.config.js
:
const resolve = require('resolve');
exports.webpack = function(config, env) {
config.resolve = {
extensions: ['.js', '.jsx', '.json', '.scss', '.css', '.svg', '.pdf', '.zip', 'mp4', 'jpg', 'png'],
alias: {
styles: resolve(__dirname, 'src/styles'),
js: resolve(__dirname, 'src/js'),
assets: resolve(__dirname, 'assets')
}
};
};
But returns the error:
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.resolve.alias should be one of these:
object { <key>: string } | [object { alias?, name?, onlyModule? }]
-> Redirect module requests
Details:
* configuration.resolve.alias['styles'] should be a string.
-> New request
* configuration.resolve.alias['js'] should be a string.
-> New request
* configuration.resolve.alias['assets'] should be a string.
-> New request
* configuration.resolve.alias should be an array:
[object { alias?, name?, onlyModule? }]
at webpack (/Users/guilhermeu/.config/yarn/global/node_modules/webpack/lib/webpack.js:24:9)
at module.exports (/Users/guilhermeu/.config/yarn/global/node_modules/@pwa/core/index.js:64:12)
at module.exports (/Users/guilhermeu/.config/yarn/global/node_modules/@pwa/cli/lib/watch.js:12:30)
at Sade.parse (/Users/guilhermeu/.config/yarn/global/node_modules/sade/lib/index.js:153:56)
at Object.<anonymous> (/Users/guilhermeu/.config/yarn/global/node_modules/@pwa/cli/bin.js:43:3)
at Module._compile (module.js:643:30)
at Object.Module._extensions..js (module.js:654:10)
at Module.load (module.js:556:32)
at tryModuleLoad (module.js:499:12)
at Function.Module._load (module.js:491:3)
at Function.Module.runMain (module.js:684:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
I'm not sure where the problem is
suppose that i start at mydomain.com, the subsequent url loads fine (mydomain.com/about).
However, if i navigate directly to it, i got 404 (from nginx). I use nginx to serve the build directory from pwa build
Hi @lukeed,
Thanks for this amazing project, it sounds really exciting :)
I'm playing a little bit with it and I'm wondering if there's a technique to customise the way the pages are server rendered?
For instance, in projects like Razzle, you have access to a server.js
file where you can customize the code. With this approach, you can support libraries like styled-components, Apollo etc...
Currently, I don't see anything in the doc that could support that. Did I miss something or is there a plan to support that in the future?
--https
presence--key
, --cert
, and --cacert
flags
https
object for WDSWould this package accept PRs with support for @pwa/preset-${framework}
? I see you have two open issues for other larger frameworks but I'm thinking slightly smaller ones. HyperApp, Elm, Aurelia and so on.
I'm not sure if this is the expected behavior.
take preact for example, there are a bunch of default resolve.alias
for webpack. as soon as i add more alias, the other default, required aliases were gone, leaving pwa build
to fail.
'react': 'preact-compat',
'react-dom': 'preact-compat',
'preact': opts.production ? 'preact/dist/preact.min.js' : 'preact',
'react-addons-css-transition-group': 'preact-css-transition-group',
'create-react-class': 'preact-compat/lib/create-react-class'
i have to copy them and add to my override config to make it work.
It is me again with the issue about Browserslist. Hope I didn’t bother you with it 😅
Current browsers are (according to Jamie’s article)
>0.25%, not ie 11, not op_mini all
Unfortunately, this article was not created with good analysis behind.
Here I bring developers around the world and they say that Jamie’s target browsers settings could cut the whole countries from the Internet
browserslist/browserslist#250
Personally, I see people use Opera Mini everyday here. In the streets, in cafes, in buses, everywhere you can think of.
Here are Browserslist’s official recommendations
- Select browsers directly (
last 2 Chrome versions
) only if you are making a web app for a kiosk with one browser. There are a lot of browsers on the market. If you are making general web app you should respect browsers diversity.- If you want to change the default set of browsers we recommend to combine
last 1 version
,not dead
with> 0.2%
(or> 1% in US
,> 1% in my stats
).last n versions
adds too many dead browsers and does not add popular old versions.> 0.2%
make popular browsers even more popular, so we will have a monopoly and stagnation, as we had with Internet Explorer 6.- Don’t remove browsers just because you don’t know them. Opera Mini has 100 million users in Africa and it is more popular in the global market than Microsoft Edge. Chinese QQ Browsers has more market share than Firefox and desktop Safari altogether.
The default query defaults
(or > 0.5%, last 2 versions, Firefox ESR, not dead
) is very balanced. If you want to keep bundle smaller, but still be open for everyone in the world, I can suggest:
> 1%, last 1 version, not ie 11, not ie_mob 11, not dead
Would like to try PWA but I get the following from a local install:
$ pwa --help
No command 'pwa' found, did you mean:
Command 'paw' from package 'paw-common' (universe)
Command 'pca' from package 'eigensoft' (multiverse)
Command 'bwa' from package 'bwa' (universe)
Command 'pda' from package 'speech-tools' (universe)
Command 'pwd' from package 'coreutils' (main)
Command 'pia' from package 'pia' (universe)
Command 'poa' from package 'poa' (universe)
Command 'pua' from package 'pglistener' (universe)
pwa: command not found
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.