I'm fairly new to utilizing Svelte and JavaScript. I've been attempting to construct a page that incorporates numerous API components from external websites, but I'm facing some challenges. I'm uncertain about where exactly to place the various sections of code. The closest solution I have managed to come up with is as follows:
Inside Bapi.svelte (component):
<script>
function getSomething() {
fetch('getapi')
}
</script>
<h1>retrieve data here</h1>
<button on:click={getSomething}>Get Data!</button>
Inside server.js (routes):
import sirv from 'sirv';
import express from 'express';
import compression from 'compression';
import * as sapper from '@sapper/server';
const { PORT, NODE_ENV } = process.env;
const dev = NODE_ENV === 'development';
const app = express();
app.use(express.urlencoded())
app.use(express.json())
app.use(
compression({ threshold: 0 }),
sirv('static', { dev }),
sapper.middleware()
)
.listen(PORT, err => {
if (err) console.log('error', err);
});
Inside getapi.js (routes):
export function retrieveData(res, req, next) {
var resp = app.endpoints.coinbasepro.get('/coinbase-products');
console.log(resp)
}
Upon clicking 'Get Data', I encounter this error: "app is not defined". This issue might be related to scope, but after shuffling the variable around for some time, I find myself in need of assistance as I am currently stuck at this stage. Thank you.