AWS Developer portal - How to setup locally and change the UI

Question

I have cloned the AWS developer portal in my local machine from the - https://github.com/awslabs/aws-api-gateway-developer-portal. What my requirement is that I need to change the UI of the AWS developer portal and mark it with the client branding, give different header or footer and other UI related changes. The UI is in react JS and npm run and npm install is not helping.I am stuck as I unable to run the project locally and seethe UI or make any change. Any help I setting up the AWS developer portal locally and customize it according to the client's requirement?

Answer 1

Please follow the below steps to run this dev portal in windows local machine:

Steps:

Install Git [2], Node v14 [3], AWS CLI [4], AWS SAM CLI [5].
Configure access key and secret key for AWS CLI using following command [6]:
$ aws configure

Once you hit enter you will have to add following information:

AWS Access Key ID: AWS Secret Access Key: Default region name: Default output format: json

I found an issue related to Windows where child process for npm is not working correctly [7]. To mitigate this issue I found that npm.cmd works correctly. Go to npm.js file present at "aws-api-gateway-developer-portal\scripts\npm.js" and replace "npm" at line number 11 to "npm.cmd" Your line number 11 in npm.js should be as follows:

await run('npm.cmd', process.argv.slice(2), { action: 'Execution', target, cwd: resolved })
Go to run.js file present at "aws-api-gateway-developer-portal\scripts\run.js" and replace "npm" at line number 14 to "npm.cmd"
Your line number 14 in run.js should be as follows:
'npm.cmd', ['run', task, '—', ...args],
Now as per the documentation kindly copy the "example-dev-deployer.config.js" to "deployer.config.js" and replace following values:
==> Replace "YOUR_LAMBDA_ARTIFACTS_BUCKET_NAME" with your s3 bucket name ==> Replace "CUSTOM_PREFIX" with any prefix you like. (For example: test)

Run following command inside aws-api-gateway-developer-portal folder:
$ node run install release

I noticed that sam cli did not deploy the template correctly hence after running the previous command find the "sam deploy" and copy it. This is the example sam deploy command:

$ sam deploy --template-file C:\Users\Administrator\Desktop\demo\aws-api-gateway-developer-portal\cloudformation\packaged.yaml --stack-name dev-portal0 --capabilities CAPABILITY_NAMED_IAM --parameter-overrides StaticAssetRebuildToken=XXXXXXXXXXX StaticAssetRebuildMode=overwrite-content DevPortalSiteS3BucketName=test-dev-portal-static-assets0 ArtifactsS3BucketName=test-dev-portal-artifacts0 DevPortalCustomersTableName=DevPortalCustomers0 DevPortalPreLoginAccountsTableName=DevPortalPreLoginAccounts0 DevPortalFeedbackTableName=DevPortalFeedback0 CognitoIdentityPoolName=DevPortalIdentityPool0 LocalDevelopmentMode=true CognitoDomainNameOrPrefix=test-auth0 —s3-bucket testbucket

Kindly replace the packaged.yaml to template.yaml. Following is the sample command that you should make:

$ sam deploy --template-file C:\Users\Administrator\Desktop\demo\aws-api-gateway-developer-portal\cloudformation\template.yaml --stack-name dev-portal0 --capabilities CAPABILITY_NAMED_IAM --parameter-overrides StaticAssetRebuildToken=XXXXXXXXXXX StaticAssetRebuildMode=overwrite-content DevPortalSiteS3BucketName=test-dev-portal-static-assets0 ArtifactsS3BucketName=test-dev-portal-artifacts0 DevPortalCustomersTableName=DevPortalCustomers0 DevPortalPreLoginAccountsTableName=DevPortalPreLoginAccounts0 DevPortalFeedbackTableName=DevPortalFeedback0 CognitoIdentityPoolName=DevPortalIdentityPool0 LocalDevelopmentMode=true CognitoDomainNameOrPrefix=test-auth0 —s3-bucket testbucket

Now run this command and you should see that the stack is being deployed.

Finally run "node run start" command and it will open your default browser. Wait for some time till the script loads and then you should see the developer portal running locally. Please note - that the configuration and names, given in the SAM deploy command should be same as you have given in the deployer.config.js file. Otherwise it will throw error.