Develop Reference

Workbox service worker doesn't work as it should with PWA

I'm trying to make a very basic PWA with a service worker using Workbox but I have a problem. I'm using the command line interface to generate the service worker, everything works, perfect lightscore but I can't add my index.html to the runtime caching. I have to add it to the global patterns so that my website works in offline mode but then when I update my index.html file it doesn't get updated unless I clear my cache. I want the same thing as my js and css. When I upgrade those files they get updated.
Here is my workbox configuration file:
module.exports = {
globDirectory: "./",
globPatterns: ["**/*.{html,json}"],
swDest: "./serviceworker.js",
// Define runtime caching rules.
runtimeCaching: [
{
// Match any request that ends with .png, .jpg, .jpeg or .svg. urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
urlPattern: /\.(?:png|jpg|jpeg|svg)$/,
// Apply a network-first strategy.
handler: "NetworkFirst",
options: {
// Use a custom cache name.
cacheName: "images",
},
},
{
urlPattern: /\.(?:js|css)$/,
handler: "NetworkFirst",
options: {
cacheName: "main",
},
},
],
};

My interpretation of your question is that you don't want to use precaching, because you would prefer not to have cache-first HTML. If so, that's fine—you don't actually need to use workbox-cli in that case.
Instead, if you're just using runtime caching, you could avoid using Workbox build tools entirely, and instead just deploy a service worker file that installs a default NetworkFirst route:
importScripts('https://storage.googleapis.com/workbox-cdn/releases/6.1.1/workbox-sw.js');
const strategy = new workbox.strategies.NetworkFirst();
workbox.routing.setDefaultHandler(strategy);
// Ensure that our cache is pre-populated at install time,
// which will help with offline checks.
const urls = [
'/',
// Add any other URLs that you want to ensure are cached here.
];
workbox.recipes.warmStrategyCache({urls, strategy});
workbox.core.clientsClaim();
Once that service worker is registered, all responses will automatically be cached at runtime, and if you're ever offline, the previously cached response will be used as a fallback (assuming there was a previous request that had populated the cache).
If you want, you can mix this with a call to `workbox.recipes.warmStrategyCache

How to configure the proxy url inside Webpack.config.js after deploying the app?

On my local machine, my React front-end runs on localhost:3000 and my Node/Express back-end
runs on localhost:8080.
Inside webpack.config.js (for my front-end), I use proxy so my front-end can fetch() data from the back-end via the url /api
module.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:8080'
}
}
};
After I deployed my app to Pivotal cloud, the proxy configuration no longer works because it's set to localhost.
How should I configure it so that it's not hard-coded to localhost?

How to update React localhost (127.0.0.1:3000) to another domain (local.example.com)
Might be too late on answer... First configure your hosts file to add local.example.com as your local envir(windows) see link
devServer has a host property
devServer: {
host: 'local.example.com,
port: 80
}
setting the port on 80 will allow you to visit http://local.example.com

redirect all routes to https in nuxt project hosted in heroku

I'm trying to create a middleware to redirect all my routes to https, I think I need a middleware so I've created a redirect.js file in the middleware folder of Nuxt and then I've added this to nuxt.config.js:
router: {
middleware: ["redirect"]
},
And here is my redirect.js file that gives me a server error:
export default function({ app }) {
if (process.env.NODE_ENV === "production") {
if (app.context.req.header("x-forwarded-proto") !== "https") {
app.context.res.redirect(`https://${app.context.req.header("host")}${app.context.req.url}`);
}
}
}

I found an easier way i've added the package redirect-ssl
npm i redirect-ssl
and then i've added this line in my nuxt.config.js :
serverMiddleware: ["redirect-ssl"],

You can configure this in heroku.
For Nuxt static mode:
Add the https://github.com/heroku/heroku-buildpack-static.git buildpack after the heroku/nodejs buildpack under buildpacks
Make sure the buildpacks are added in this order to an app.json in the root directory of your project
Add a static.json in the root directory of your project
Make sure root and https_only are set correctly
If you want Nuxt to resolve routes instead of Nginx (so that you don't get the Nginx 404 page when you go to an unknown route), set routes as well.
Example static.json:
{
"root": "dist/",
"routes": {
"/**": "index.html"
},
"https_only": true
}

Changing Aurelia app's index page

I am working with an Aurelia app that should start at a different page than index.html, but I cannot find where to change that.
Where in an Aurelia app can you set which landing page to use?

This is misunderstanding. index.html page is the default landing page set by web server, not Aurelia. E.g. if you try to get the url e.g.https://stackoverflow.com the web server will give index.html by default. You need to change it in web server.
e.g. using Apache web server directive DirectoryIndex myindex.html
From https://httpd.apache.org/docs/2.4/mod/mod_dir.html:
The DirectoryIndex directive sets the list of resources to look for, when the client requests an index of the directory by specifying a / at the end of the directory name.
When using development server of Aurelia (default webpack-dev-server configured by aurelia-cli), the index.ejs compiles to index.html. You may need to change configuration of HtmlWebpackPlugin in webpack.config.js in order to change generated file from index.html to some other name:
new HtmlWebpackPlugin({
template: 'index.ejs',
filename: 'myindex.html',
...

If you're using the CLI, there is not an easy way to do this. The CLI is mostly for basic use cases, and if you're trying to do something fancy, you're going to have to learn a bit more about JavaScript tooling.
You can still do it and here's how:
Open aurelia_project/tasks/run.js and make sure the server property of the argument to the browserSync function has the index property pointing at the index file you want to use, like this:
let serve = gulp.series(
build,
done => {
browserSync({
online: false,
open: false,
port: 9000,
logLevel: 'silent',
server: {
index: 'my-special-index.html', // Make sure you have this line in there.
baseDir: [project.platform.baseDir],
middleware: [historyApiFallback(), function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
next();
}]
}
}
);

Serving Apostrophe-CMS S3 assets & attachments as HTTPS

I"m using Amazon S3 to serve my static assets and user uploads in apostrophe-cms. My site loads with https, but all my assets are loading as http.
I have a cloudfront distribution at the static subdomain of my site, but I'm not sure how I can configure apostrophe-cms to use this for locating my assets.

I believe you can achieve this by specifying the following for your apostrophe-attachments config:
// in ./lib/modules/apostrophe-attachments/index.js
module.exports = {
uploadfs: {
https: true,
cdn: {
enabled: true,
url: 'https://assets.example.com'
}
}
}
Hope that helps!