Unable to get vuetify-spa to point to referenced dto address

Clients TypeScript
1

I have created a brand new project using web new vuetify-spa SSVue1.

I have another ServiceStack service with Hello2 service running at http://localhost:5001.

I have added this reference to SSVue1 using typescript-ref http://localhost:5001 ACME.

The ACME.dtos.ts file gets added to SSVue1. I change the existing import { Hello } from ‘…/dtos’; to import { Hello2 } from ‘…/ACME.dtos’;

When I type in the text box on the Home view and look at the network traffic, its calling http://localhost:8080/json/reply/Hello2?name=Vue instead of http://localhost:5001/json/reply/Hello2?name=Vue

What am I missing?

2

the npm Webpack dev server runs on 8080 but I don’t know why your client is using it.

The JsonServiceClient uses the BaseUrl it’s configured with, so track the JsonServiceClient that’s making the request and see how it’s configured.

3

I’m using the suggested npm run serve so that’s probably why it’s using 8080.

I’ll try and track down the JsonServiceClient.

4

Well if you’re already viewing from http://localhost:8080/? Then the clients is going to be using the same URL.

5

But shouldn’t I be able to point to different services? I would expect the BaseUrl that’s mentioned in each of the dtos files to be used, but it’s not. Having a single global BaseUrl doesn’t make sense in this case to me. And isn’t that for the web app itself?

Web app will be on 8080 for example, and API may be on 5001, for example or even a different host using CORS.

6

No it always uses the website that the App is loaded from, otherwise you’d need to enable CORS.

If you want to use a different URL you will need to configure the full BaseUrl in the JsonServiceClient, and then will need to configure CORS to allow cross-domain requests.

7

The BaseUrl is where the DTO types are updated from, the URL is not embedded in any DTOs. The URL used is always what the JsonServiceClient is configured with, which by default is / so it uses the same URL as the App, which is nearly always what you want.

8

But isn’t it quite common to be able to specify any host name to access an API from within a website? I know you can do this using raw Vue stuff like Axios or the fetch api. So are you saying that with ServiceStack, I only get ONE global url to call an api via JsonServiceClient?

For example, this scenario is quite common:

Web front end: http://www.acme.com
API1 called by web front end: http://api1.acme.com
API2 called by web front end: http://api2.acme.com

I can easily do this with raw VueJS.

How can I do this with ServiceStack and JsonServiceClient with dtos?

9

No it’s not common to have APIs on a different domain, otherwise every web server would need to have CORS enabled. That’s not normal, it’s only required when the Web App and APIs are hosted on different domains.

No I’ve never said anything close to that. You can use as many different JsonServiceClient as you want:

var client1 = new JsonServiceClient(BaseUrl1);
var client2 = new JsonServiceClient(BaseUrl2);
10

Ok, that makes sense. Thanks.