running contember on Cloud9?

[osseonews]

We are trying to set up Contember to run on Cloud9 (Amazon IDE). We have got everything running, but can't preview the application anywhere. Apparently, Contember runs on ports 1480 to 1485, but Cloud9 only opens port 8080, 8081, 8082. How can we adjust the ports for Contember, so we can preview it on Cloud9?

[matej21]

Hello, the port range from 1480 to 1485 are just default ports provided via docker-compose. You can modify these ports in the docker-compose.yaml file.

[osseonews]

Thanks. I looked at the docker-compose.yaml file, but I didn't see 1480 there, which is the main application. Where is 1480 set? I'm wondering if you can provide a sample docker yaml file that has everything running on 8080, 8081, and 8082, as these are the only ports available on AWS Cloud9. We do all our development on Cloud9 and just can't get contember working there. Thanks.

[honzasladek]

@osseonews Hi! The ports are defined in docker-compose.yaml

There's a list of services that are running and how. The relevant port sections is this:

ports:
      - '1481:4000'

(Example from contember-engine service).

There's several services you might not need for your development (like Adminer and Mailhog) though we include them as they're often quite useful.

[honzasladek]

@osseonews Reading it again and you're asking about the 1480 port. 👼

It's the port where Interface runs locally (outside of Docker). The port is defined in package.json like this:

"start-admin": "vite admin --port 1480 --host 0.0.0.0",

Basically when you start Contember by npm start, you run this command: npm run start-engine && concurrently npm:start-admin npm:start-website.

And these commands are defined in this file, the start-admin runs vite with this port. You can change to pretty much anything you like.

[osseonews]

Thanks. We are getting somewhere. We changed 1480 to 8080 in the package.json and got something working. But, then we get the error below on the Admin screen. How do we fix this? We are just using your quickstart, so not doing anything. I assume this has to do with the ports in the yaml file. We have this in the file per your suggestion: ports:- '8081:4000' on line 32. Is this correct? What other lines do we change? There are so many ports in that file, 4000??? It's not clear what to do. Would be great if you provided a yaml file that will work on ports 8080,8081, and 8082 for the services. Really have no idea how to set up the ports in this file. What is 4000 for?

ERROR

TypeError
Failed to fetch
@fs/home/ec2-user/environment/quickstart/node_modules/@contember/client/src/graphQlClient/GraphQlClient.ts:32
GraphQlClient.sendRequest

[osseonews]

Below is the complete error we get.

TypeError Failed to fetch @fs/home/ec2-user/environment/quickstart/node_modules/@contember/client/src/graphQlClient/GraphQlClient.ts:32 GraphQlClient.sendRequest 27 resolvedHeaders['Authorization'] =Bearer ${resolvedToken}`
28
}
29
30
console.debug(query)
31
32
const response = await fetch(this.apiUrl, {
33
method: 'POST',
34
headers: resolvedHeaders,
35
signal,
@fs/home/ec2-user/environment/quickstart/node_modules/@contember/admin/src/tenant/queries/me.ts:66
61
}
62
63
export const useFetchMe = (): () => Promise<{ data: MeResponse }> => {
64
const client = useTenantGraphQlClient()
65
return useCallback(async () => {
66
return await client.sendRequest<{ data: MeResponse }>(ME_QUERY, {})
67
}, [client])
68
}
69
@fs/home/ec2-user/environment/quickstart/node_modules/@contember/admin/src/components/Identity/IdentityProvider.tsx:75
70
const clearIdentity = useCallback(() => setIdentityState({ state: 'cleared' }), [])
71
72
const refetch = useCallback(async () => {
73
setIdentityState({ state: 'loading' })
74
try {
75
const response = await fetchMe()
76
const person = response.data.me.person
77
const projects = response.data.me.projects
78
const permissions = response.data.me.permissions
@fs/home/ec2-user/environment/quickstart/node_modules/@contember/admin/src/components/Identity/IdentityProvider.tsx:134
129
)
130
131
useEffect(
132
() => {
133
if (sessionToken !== undefined) {
134
refetch()
135
}
136
},
137
[sessionToken, refetch],
@fs/home/ec2-user/environment/quickstart/node_modules/react-dom/cjs/react-dom.development.js:23487
invokePassiveEffectCreate
23482
}
23483
}
23484
23485
function invokePassiveEffectCreate(effect) {
23486
var create = effect.create;
23487
effect.destroy = create();
23488
}
23489
23490
function flushPassiveEffectsImpl() {
@fs/home/ec2-user/environment/quickstart/node_modules/react-dom/cjs/react-dom.development.js:3945
HTMLUnknownElement.callCallback2
3940
var funcArgs = Array.prototype.slice.call(arguments, 3);
3941
3942
function callCallback() {
3943
didCall = true;
3944
restoreAfterDispatch();
3945
func.apply(context, funcArgs);
3946
didError = false;
3947
} // Create a global error event handler. We use this to capture the value
3948
// that was thrown. It's possible that this error handler will fire more
@fs/home/ec2-user/environment/quickstart/node_modules/react-dom/cjs/react-dom.development.js:3994
Object.invokeGuardedCallbackDev
3989
window.addEventListener('error', handleWindowError);
3990
fakeNode.addEventListener(evtType, callCallback, false); // Synchronously dispatch our fake event. If the user-provided function
3991
// errors, it will trigger our global error handler.
3992
3993
evt.initEvent(evtType, false, false);
3994
fakeNode.dispatchEvent(evt);
3995
3996
if (windowEventDescriptor) {
3997
Object.defineProperty(window, 'event', windowEventDescriptor);
@fs/home/ec2-user/environment/quickstart/node_modules/react-dom/cjs/react-dom.development.js:4056
invokeGuardedCallback
4051
/
4052
4053
function invokeGuardedCallback(name, func, context, a, b, c, d, e, f) {
4054
hasError = false;
4055
caughtError = null;
4056
invokeGuardedCallbackImpl$1.apply(reporter, arguments);
4057
}
4058
/*
4059

• Same as invokeGuardedCallback, but instead of returning an error, it stores
  @fs/home/ec2-user/environment/quickstart/node_modules/react-dom/cjs/react-dom.development.js:23574
  flushPassiveEffectsImpl
  23569
  23570
  {
  23571
  setCurrentFiber(_fiber);
  23572
  23573
  {
  23574
  invokeGuardedCallback(null, invokePassiveEffectCreate, null, _effect2);
  23575
  }
  23576
  23577
  if (hasCaughtError()) {
  @fs/home/ec2-user/environment/quickstart/node_modules/scheduler/cjs/scheduler.development.js:468
  unstable_runWithPriority
  463
  464
  var previousPriorityLevel = currentPriorityLevel;
  465
  currentPriorityLevel = priorityLevel;
  466
  467
  try {
  468
  return eventHandler();
  469
  } finally {
  470
  currentPriorityLevel = previousPriorityLevel;
  471
  }

`

[matej21]

Would you be able to take a look at the Network panel in devtools? This could offer additional insights into the specific request that is being attempted.