If you don’t have a backend running, you can set up the ...APP_SERVICE .env variable to sandbox.
.env.development
# Options: api, sandbox
VITE_REACT_APP_SERVICE=sandbox
...This will let you design interfaces without an API, loading sample data.
So instead of calling AuthenticationService…
services/api/core/users/AuthenticationService.ts
...
export class AuthenticationService extends ApiService implements IAuthenticationService {
constructor() {
super("Authentication");
}
login(payload: UserLoginRequest): Promise<UserLoggedResponse> {
return new Promise((resolve, reject) => {
super
.post(payload, "Login")
.then((response: UserLoggedResponse) => {
store.dispatch(login(response));
resolve(response);
})
.catch((error) => {
reject(error);
});
});
}
...it will call FakeAuthenticationService.
services/api/core/users/FakeAuthenticationService.ts
...
const fakeUserService = new FakeUserService();
const fakeWorkspaceService = new FakeWorkspaceService();
const fakeTenantService = new FakeTenantService();
const defaultWorkspace = fakeWorkspaceService.workspaces[0];
defaultWorkspace.tenant = fakeTenantService.tenants[0];
const userLoggedResponse: UserLoggedResponse = {
user: fakeUserService.users[0],
token: "",
defaultWorkspace,
};
export class FakeAuthenticationService implements IAuthenticationService {
login(_payload: UserLoginRequest): Promise<UserLoggedResponse> {
return new Promise((resolve, _reject) => {
setTimeout(() => {
resolve(userLoggedResponse);
}, 500);
});
}
...This is because the services/index.ts file listens to the _APP_SERVICE environment variable.
services/index.ts
import { IAuthenticationService } from "@/services/api/core/users/IAuthenticationService";
import { AuthenticationService } from "@/services/api/core/users/AuthenticationService";
import { FakeAuthenticationService } from "@/services/api/core/users/FakeAuthenticationService";
...
class Services {
authentication: IAuthenticationService;
...
constructor() {
if (import.meta.env.VITE_REACT_APP_SERVICE === "sandbox") {
this.authentication = new FakeAuthenticationService();
} else {
this.authentication = new AuthenticationService();
...