I'm trying to deploy my Svelte app on AWS Amplify, I push the commits, Amplify builds and verifies the app, but then if I visit the app URL it's just a blank page, it might be an adapter problem? I tried the node.js and static ones but no luck
If you want to deploy a Sveltekit application to AWS Amplify. You need to use the #sveltejs/adapter-static, since it will serve your app via a static CDN.
Once you change the adapter, make sure to add a fallback in svelte.config.js:
// svelte.config.js
import adapter from '#sveltejs/adapter-static';
export default {
kit: {
adapter: adapter({
fallback: 'index.html'
})
}
};
In the end, this solved the problem:
svelte.config.js
import adapter from '#sveltejs/adapter-static';
/** #type {import('#sveltejs/kit').Config} */
const config = {
kit: {
adapter: adapter(),
prerender: {
default: true
}
}
};
export default config;
Related
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'm playing with AWS Amplify since I've to introduce some of its feature in a legacy application that has no framework (no React, no Angular: just vanilla JS).
I used successfully the Auth module so I recreated a simple sign up/in/out strategy. What I want now is to call a REST API, using REST API module. So I created an API using API Gateway PetStore example and I would interact with it.
So I created the configuration:
import Amplify from '#aws-amplify/core';
Amplify.configure({
Auth: {
...
},
API: {
endpoints: [
{
name: "PetStore", // name of the API in API Gateway console
endpoint: "https://XXX.execute-api.eu-central-1.amazonaws.com/dev",
region: "eu-central-1",
paths: ['/']
}
]
}
});
and somewhere else:
import Api from '#aws-amplify/api-rest';
Api.get('PetStore', '/pets', {})
.then(response => {
console.log(response)
}).catch(error => {
console.log(error);
});
But, when executed, I get always the same error:
API PetStore does not exist
Any idea? Remember that:
API Already exist
I don't want to use Amplify CLI to create AWS resources
I'd like to add that #Deiv was correct to suggest API.configure(), this worked for me. After trying amplify pull and amplify push I still received the error API <api-name> does not exist.
So my code now looks like this:
import Amplify, { API } from 'aws-amplify';
import awsconfig from './aws-exports';
Amplify.configure(awsconfig);
API.configure(awsconfig);
I am using npm package: aws-amplify 3.3.21
I had this same issue and I managed to resolve it by configuring the exports on the "Api" object directly:
API.configure(aws_exports);
Previously it worked for me with just setting it on Amplify.configure, but it seems a newer version of Amplify requires it on the sub module itself.
Some more bits and pieces can be found here in this long-standing issue (in which the same issue popped up for Auth, but I applied the same to both in my case and it fixed it): https://github.com/aws-amplify/amplify-js/issues/4315
You need to call API.configure() after Amplify.configure is called, or else your API setup won't be applied, hence it returns API PetStore does not exist
import Amplify, { API } from 'aws-amplify'; // this part depends on which Amplify you are using. but make sure to import API
Amplify.configure({
Auth: {
...
},
API: {
endpoints: [
{
name: "PetStore", // name of the API in API Gateway console
endpoint: "https://XXX.execute-api.eu-central-1.amazonaws.com/dev",
region: "eu-central-1",
paths: ['/']
}
]
}
});
// Call this
API.configure(); // no awsconfig required as you have set your own
We changed the version of aws-amplify from 3 back to a previous version "aws-amplify": "^2.2.2" in package.json and that resolved it.
Think version 3 broke the manual configuration of aws-amplify.
Try changing the version to a previous version you know worked.
API * does not exist usually means you haven't pushed the REST API you created. If you can't use amplify push have you manually created and amplify API through the console?
I followed these instructions to add swagger to my ASP.NET Core application.
It works fine when I host it as a root website but when I host the app as an alias on an existing website, say myserver.com/myapp, swagger will look for swagger.json at an incorrect URL and report: *Can't read swagger JSON from https://myserver.com/swagger/v1/swagger.json. It should instead use https://myserver.com/myapp/swagger/v1/swagger.json.
The message I get is:
Can't read swagger JSON from https://myserver.com/swagger/v1/swagger.json
How can I configure swashbuckle/swagger to use the application base path and look for the swagger.json file at the right place?
I'm hosting on IIS.
The version of swashbuckle is:
"Swashbuckle": "6.0.0-beta902"
I suspect that I'll have to add something to the app.UseSwaggerUi() in the Configure method in Startup.cs but I'm not sure what.
Startup Configure:
public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole(Configuration.GetSection("Logging"));
loggerFactory.AddDebug();
if (env.IsDevelopment())
{
app.UseDeveloperExceptionPage();
app.UseBrowserLink();
}
else
{
app.UseExceptionHandler("/Home/Error");
}
app.UseStaticFiles();
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Home}/{action=Index}/{id?}");
});
// Enable middleware to serve generated Swagger as a JSON endpoint
app.UseSwagger();
// Enable middleware to serve swagger-ui assets (HTML, JS, CSS etc.)
app.UseSwaggerUi();
}
You can use the ASPNETCORE_APPL_PATH environment variable to get the application basepath.
app.UseSwaggerUI(c =>
{
string basePath = Environment.GetEnvironmentVariable("ASPNETCORE_APPL_PATH");
if (basePath == null) basePath = "/";
c.SwaggerEndpoint($"{basePath}swagger/v1/swagger.json", "My API");
});
I ended up specifying the endpoint explicitly:
app.UseSwagger();
app.UseSwaggerUi(c =>
{
c.SwaggerEndpoint($"/swagger/v1/swagger.json", "MyAPI documentation");
//c.SwaggerEndpoint($"/myapi/swagger/v1/swagger.json", "MyAPI documentation");
});
I've been fooling around with hosting the Web API in IIS and in IIS Express, and I end up having to swap out the endpoint depending on where I am hosting the app.
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/'
}
});
I am having Facebook and Google user accounts in my meteor app. I did setup them using accounts-ui package using the nice default UI of it. But I removed the default UI and added some custom buttons. How to reconfigure the private and public keys when deploying now? I am using mup to deploy.
I believe there was something like settings.json and settings.production.json
You make mup use the latter one.
Edit: or it was settings.development.json and settings.json, the latter one is the default?
You could use a production or development settings file for deploying
your apps:
http://themeteorchef.com/snippets/making-use-of-settings-json/
meteor deploy example.meteor.com --settings setting-production.json
setting-production.json =>
{
"kadira": {
"appId": "XXXXXXXXXXXXX",
"appSecret": "XXXXXXXXXXXXXXXXXXXXXXX"
},
"reCaptcha": {
"secretKey": "XXXXXXXXXXXXXXXXXXXXXXX"
},
"public": {
"reCaptcha": {
"siteKey": "XXXXXXXXXXXXXXXXXXXXN"
}
}
}