Serve file from root in dev server?

[glittle]

In trying to get a service worker to work, my main server can correctly serve out my sw.js from the root of the site.

However, when running in dev, from quasar dev command, how can I serve a file from the root of the site? I need this url to work: http://localhost:8080/sw.js

It seems that a good place for this would be in the config/index.js file, in the dev.proxyTables section, but the webpack proxyTables section (which is deprecated? - https://github.com/chimurai/http-proxy-middleware#http-proxy-middleware-options) only allows proxy to other URLs, not to pick up a local file.

https://github.com/oliviertassinari/serviceworker-webpack-plugin seems to be another approach. However, to use it requires a change in the webpack config which isn’t available in a Quasar Framework application.

What is the best way to do this?

Edit:
I had hidden the build folder in my editor, so didn’t see it. Fixed that. Now working now on trying to use the serviceworker-webpack-plugin but running into another issue (https://github.com/oliviertassinari/serviceworker-webpack-plugin/issues/16).

[rstoenescu]

Service workers are currently “uncharted territory” for Quasar and new to Webpack as well. Unfortunately I do not have enough time to look over it at the moment. It’s on the roadmap though as you’ve seen the PWA Github ticket. If you make any progress, please do share it. Thanks!

[glittle]

Thanks, @rstoenescu.

I’ve got my service worker going using the copy-webpack-plugin. I added this to my webpack.base.config.js:

  var CopyWebpackPlugin = require('copy-webpack-plugin')

and in the list of plugins near the bottom of that file:

new CopyWebpackPlugin([
  {
    from: 'root/'
  }
])

Beside src folder, I have a new folder that I called root. All the files in that folder end up in the root of the dev and build outputs.

To use them, the index.html file has:

and to get OneSignal going, add their code to themain.js file

I’m actually using the OneSignal service worker along with my own. To do this, I edited both of the OneSignal files to add a reference to mine:

See https://documentation.onesignal.com/docs/web-push-sdk-setup-https for OneSignal information.

[rstoenescu]

@glittle Nice find!

[boriscy]

@glittle Could you share some of your findings with service workers and Onesignal for web push notifications, can I contact u and ask some questions?, Thanks for the post

[vedovelli]

@glittle said in Serve file from root in dev server?:

I’ve got my service worker going using the copy-webpack-plugin. I added this to my webpack.base.config.js:

Thanks a lot for this solution. Worked like a charm here!

@rstoenescu If I may suggest, this solution should be included in the docs.

[rstoenescu]

Hi all. Please help out with a PR for docs (hit edit icon on top of http://quasar-framework.org/guide/app-troubleshoot-and-tips.html – or edit link at bottom of page). I’m overloaded with the new forms work and want to finish this up before jumping to anything else.

[RichAyotte]

I’ve made a few tweaks.

Instead of using the CopyWebpackPlugin, I took a simpler approach by adding the following to script.dev.js

// serve root static assets
app.use(path.posix.join(
	webpackConfig.output.publicPath
	, '/'
), express.static('./src/root'))

And then in script.build.js add:

shell.cp('-R', 'src/root/*', targetPath)

[s.molinari]

Razvan is off for this week. As he suggested, it would be really cool, if you could put your finding together in a docs page. Even just some text here in this thread would be super, if you aren’t up for making a docs PR. It would be hugely appreciated.

Scott

[michael32]

This post is deleted!

[rstoenescu]

Just dropping a message here for people that are not aware yet: Quasar PWA is available for some time http://quasar-framework.org/guide/progressive-web-apps.html