lukeed / pwa Goto Github PK

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.

• Should include .tsx? as module extension
• Should swap out babel-loader for itself
• Should expect typescript config key?
  The standard TS config/rc file already works.

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]'
    }
  })

Evidence:

https://www.smashingmagazine.com/2018/11/guide-pwa-progressive-web-applications/ 🔥

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.

• Offline Plugin
• SW Precache
• SW Workbox

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.

https://stylelint.io/

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:

• Show Buble in "Features" when preset == none
• Show 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:

• assets
• css
• index.html
• .gitignore

(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)

Hi ! How to make this svg 😀

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:

1. Add "browserslist": ["defaults"] to package.json generator
2. Add warning on config.browsers, which will ask users to move browsers.
3. In next major version, throw a error on 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:

1. Uglify is no longer maintained

2. Babel@7 (#11) is our doorway into ESM builds

3. 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?

• Respond to --https presence
• Respond to --key, --cert, and --cacert flags
  • Construct https object for WDS

Would 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

1. 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.
2. 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.
3. 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