I'm trying to deploy an Ember CLI app using ember-cli-deploy and the 'lightning' deployment method (http://ember-cli-deploy.com/docs/v0.6.x/the-lightning-strategy/).
I've got a redis server to serve my index.html file. I've got my assets uploaded to S3. However my image assets don't seem to be loading properly.
In ember-cli-build.js I have:
var app = new EmberApp(defaults, {
fingerprint: {
prepend: '//path-to-my-S3-bucket/'
}
});
but for some reason images are still being served from the redis server IP. I am getting errors like "Failed to load http://redis-server-url/my-image.jpg". Javascript and CSS files are working fine from S3.
Have I missed something here? Is there another step to this configuration?
Many thanks
I would confirm that fingerprinting is enabled. It is only enabled for 'production' builds by default. You should see an md5 checksum appended to your asset file names. For example, my-image.jpg should be something like my-image-9c2cbd818d09a4a742406c6cb8219b3b.jpg
You can override the default behavior by passing the enabled option:
var app = new EmberApp(defaults, {
fingerprint: {
enabled: true,
prepend: '//path-to-my-S3-bucket/'
}
});
Related
I'm hosting Strapi CMS on Heroku which has a limited amount of space so need to store media independently of the app.
To do this I installed strapi-provider-upload-aws-s3 and followed all of the configuration steps provided in the documentation but media is still being added to the public/uploads folder instead of my AWS S3 bucket and I can’t work out why. I’ve configured plugins.js, middlewares.js and updated my bucket policy.
Does anyone know if I need to do anything else to get this working for Strapi version 4.1.2?
I've also tried everything on this thread but I think the solutions are for version 3 because they're not working for me.
Just got it working by creating a new Strapi project, and found out that the NPM instructions are incorrect. You need to wrap the provider and provider options in config: {}. You also have to use the package's long name 'strapi-provider-upload-aws-s3'
module.exports = ({ env }) => ({
// ...
upload: {
config: {
provider: 'strapi-provider-upload-aws-s3',
providerOptions: {
accessKeyId: 'id',
secretAccessKey: 'key',
region: 'eu-west-2',
params: {
Bucket: 'Bucket'
}
},
},
},
// ...
});``
Background
I have my project deployed to Github Pages here: https://zeddrix.github.io/jw-guitar-tabs, so I have this in my svelte.config.js file:
kit: {
...
paths: {
base: '/jw-guitar-tabs'
},
appDir: 'internal',
...
}
I have this in my __layout.svelte:
<script lang="ts">
import { base } from '$app/paths';
...
const fetchFromDBAndStore = async (category: SongCategoriesType) => {
const res = await fetch(`${base}/api/categories/original-songs`);
const data = await res.json();
console.log(data);
...other code...
};
...I have my code here that uses this data...
</script>
<Layout><slot /></Layout>
Side note: I put it in this file so that this runs on any page, but I have a code to make sure that this doesn't run if I already have the data. This is not the issue.
This calls on the file: src/routes/api/categories/original-songs.ts:
import fetchSongsDB from '$utils/fetchSongsDB';
export const get = async () => fetchSongsDB('originals');
And this fetchSongsDB function fetches the songs from my database.
Everything is working fine in development mode when I run npm run dev and even in preview mode when I run npm run preview after build, of course, in localhost:3000/jw-guitar-tabs.
Issue
However, on the static github page at https://zeddrix.github.io/jw-guitar-tabs, I get this:
It serves the 404 Github Page as the response. I guess it's because it can't find the src/routes/api/categories/original-songs.ts file. But of course Github will not find this file because the deployed folder to gh-pages is the build folder so I don't have this original file route anymore.
How would I solve this?
Rename original-songs.ts to original-songs.json.ts
Change the
fetch(`${base}/api/categories/original-songs`);
to
fetch(`${base}/api/categories/original-songs.json`);
That allows the adapter-static to generate the json files at build time.
(These are static files, to see changes made in mongodb will require a rebuild & redeploy to GitHub pages)
Sometimes the static adapter doesn't autodetect the endpoint.
You can help the adapter by specifying the url in svelte.config.js
kit: {
prerender: {
entries: [
"*",
"/api/categories/original-songs.json",
Bonus tip: The /favorites url redirects to /favorites/ when refreshing the page, add trailingSlash: "never", to kit to generate favorites.html instead of favorites/index.html and keep the /favorites url on refresh.
I have a React app that works in development and in production, however in production I get the following error in the console:
The script has an unsupported MIME type ('text/html').
Failed to load resource: net::ERR_INSECURE_RESPONSE
registerServiceWorker.js:80 Error during service worker registration:
DOMException: Failed to register a ServiceWorker: The script has an unsupported MIME type ('text/html').
The error does not happen in development, only in the production environment. The app still works correctly in production, however I would still prefer to sort out the error.
After doing some digging, it seems that in production the service-worker.js file is requested from the original index.html file while has a MIME type of text/html, the service-worker.js file therefore does not have the correct MIME type which would need to be application/javascript.
Unfortunately even though I think I understand what the issue is, I haven't been able to fix it.
The production build was created using create-react-app and is served up by a Django backend. The index.html page containing the React app is served up as follows:
re_path('.*', TemplateView.as_view(template_name='index.html'))
Is there perhaps something on Nginx that needs changing? I would guess not since I have other production sites working correctly with respect to MIME types (however none of them are React apps requiring service workers).
It happens if you have registered some service workers. If you open Chrome developer tools you may get some errors.
Go to
Chrome Dev Tools -> Application -> Service Worker
In there if you are seeing some service worker is registered then you have to unregister it by clicking it and after that refresh the page and check.
From registrationService, I can see that:
export default function register() {
if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
if (publicUrl.origin !== window.location.origin) {
return;
}
window.addEventListener('load', () => {
const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;
if (isLocalhost) {
checkValidServiceWorker(swUrl);
} else {
registerValidSW(swUrl);
}
});
}
}
When its production environment, then it tries to register to registerValidSW(swUrl); where swUrl is <your domain>/service-worker.js(FYI PUBLIC_URL is set from homepage value of package.json). But I am guessing that is not a valid path, so its getting index.html from Django. That might be why you are getting this error.
Again, based on guess, I think you can do the following solution:
Serve service-worker.js in from static folder (for example url could be: /static/service-worker.js).
Update in registrationService.js: ${process.env.PUBLIC_URL}/service-worker.js to ${process.env.PUBLIC_URL}/static/service-worker.js.
See how it goes. There is another solution if you don't want to use registerService in production, just not to register that service(I am not sure if its recommended or not, but its up to you)
if (process.env.NODE_ENV != 'production') {
registerServiceWorker();
}
I have my index.html document deployed to a www.lorem.io bucket and the rest of my assets deployed to a cdn.lorem.io bucket. Both of these buckets have their own Cloudfront distributions. When visiting https://www.lorem.io/ I'm receiving the following error:
Uncaught SecurityError: Failed to execute 'replaceState' on 'History': A history state object with URL 'https://cdn.lorem.io/' cannot be created in a document with origin 'https://www.lorem.io' and URL 'https://www.lorem.io/'.
You're ember.js configuration file defines rootURL to be "https://cdn.lorem.io" which is wrong. When accessing lorem.io your rootURL is supposed to be "https://www.lorem.io".
Perhaps you meant baseURL. See this explanation for the difference between rootURL and baseURL.
Warning: Keep in mind, that baseURL gets deprecated in ember-cli 2.7.
Our locationType setting in our configuration file is hash in production.
In ember.js configuration file, can you change your locationType as hash, and try again:
ENV.locationType = 'hash';
From Guide
From a discussion on github
How do I set CORS on requests for fonts files (or any other static resource) on the built in ember-cli server?
This is the error message just for reference:
Font from origin 'http://some-domain:4200' has been blocked from loading by Cross-Origin Resource Sharing policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:61277' is therefore not allowed access.
Add the following to ENV in config/environment.js:
module.exports = function(environment) {
contentSecurityPolicyHeader: 'Content-Security-Policy',
contentSecurityPolicy: {
// ... other stuff here
'font-src': "'self' http://some-domain:4200",
},
}
I tried adding the CSP settings but it was unsuccessful for me. I still got CORS errors for font files being referenced from my Ember app's CSS. In another post I saw someone mention ember-cli-cors which I tried and seemed to solve the issue for me. It just adds CORS headers allowing requests from everywhere to all resources which is exactly what I needed to get all resources to load properly in my local dev environment serving the Ember app assets using ember-cli's built in ember serve command to another local development server running a Python app serving my index.html from Redis(ember-cli-deploy style).