Develop Reference

React JS App becomes blank white screen when deployed with AWS Amplify

I have a React JS app that works on local host, but when I deploy to AWS amplify displays as a blank white screen with no body. The browser tab shows the correct title and icon.
The page returns status code 403 and I believe there is a CORS issue? I have been unable to correct this in my code or on the Amplify console. Can someone point me towards what is causing my problem? I have successfully deployed a different React app with Amplify.

In my case I needed to change the homepage url in the package.json to match my Amplify URL. To do this add, or modify, the following line in your package.json:
"homepage": "{Amplify-URL}/#/"
The Amplify URL can be found in the Amplify console under App settings -> Domain Management -> URL.
Hopefully this helps!

In the build settings i.e. the amplify.yml file, you need to specify under artifacts the base directory which webpack or the build tool being used will generate.In my case this is the dist directory, because due to running yarn build command.
artifacts:
# IMPORTANT - Please verify your build output directory
baseDirectory: dist

How to redeploy my github project in aws to see the changes?

I recently deployed my GitHub project in aws using Amazon Linux 2 AMI.
I installed npm, MongoDB, node and cloned the Github repo into the new instance that I created by sshing into it.
I am running the server with the forever package of npm.
Now, I made some changes in the code and pushed it to my Github repo but it's not being reflected in my project when I try to access it from outside.
So, how to redeploy it so that I see my changes when I access it from outside world?
I found this video which shows how to redeploy but it's not feasible in my case to do it.

Now, I made some changes in the code and pushed it to my Github repo but it's not being reflected in my project
Pushing to GitHub is one step.
But you still need to ssh to your execution environment (aws), and pull from GitHub in order to get the latest.
Then your npm application would have a chance to display your changes.
As an alternative to forever restart, you also can use PM2, as recommended here.
Another option would be to add a GitHub Action, like one of the deployment actions, in order to automate that step.
AWS proposes dedicated GitHub actions.
Full example: "Github Actions for web apps" from Luke Boyle.

From what I'm able to figure out you need to do the following steps:
Do a git pull after logging into your server via ssh.
cd toTheFolder where your git repo is located
git pull origin yourBranchName
forever restart or forever restartall should restart your server and your changes should reflect there.
And as VonC suggested you should go for PM2 instead but for now you can continue with forever. PM2 is very similar to forever but with a lot more features available.

Problems with create-react-kotlin-app and backend

Question
I want to deploy my application on the server in production but I am struggling to do so.
When I use npm run build to produce an "Optimized" version of the app and launch it with serve, it doesn't seem to use the proxy.
Going back to the dev server with npm start, I get this error:
TypeError: Kotlin.defineModule is not a function
I cannot get out of this. Has someone got a similar configuration? How did you make it work in production? Do you use something to proxy the requests to your backend?
App configuration
Frontend:
Web app using create-react-kotlin-app in kotlin, react. It's on localhost:3000 (dev-server) and has a proxy to localhost:3001 (the backend).
Backend
Backend, which is a simple express router for auth and data managment from the database.
Thanks in advance

I'll go back and answer my question,
One is a bug on their side:
https://youtrack.jetbrains.com/issue/CRKA-66
I'm using a config that maybe is not ideal:
I copy the build folder that contains the optimized folder into the backend and I serve the main view "index.html" as an entry point using sendFile().
I then use the url and args to route the user into various react components pages, maybe in the future it's best to switch to: https://github.com/JetBrains/kotlin-wrappers/tree/master/kotlin-react-router-dom

according with the repo documentation, if you are getting Kotlin.defineModule is not a function you would need to run:
rm -rf node_modules/.cache

Sideloading app with ngrok not working

Repro steps...
I created a Teams tab app via the teams yeoman generator (installed via npm).
I followed the locally hosted option that uses ngrok.
I started ngrok with ./ngrok http 3007 --host-header=localhost:3007 (still running) and copy/pasted the generated urls into my manifest.json
I started another terminal session and ran gulp serve
I created my package via gulp manifest
I tried to sideload the generated zip and get the error messages: Error while reading manifest.json: Failed to find icon "https://xxxxxxxx.ngrok.io/assets/tab-44.png" file in the package Failed to find icon "https://xxxxxxxx.ngrok.io/assets/tab-88.png" file in the package
(subdomain redacted)
This is what I've confirmed/debugged...
Going to https://xxxxxxxx.ngrok.io/assets/tab-44.png and https://xxxxxxxx.ngrok.io/assets/tab-88.png works fine in the browser. I see the default smiley face icon and see the request in the ngrok terminal and web interfaces.
I don't see any requests coming from Teams attempting to fetch the icons in the ngrok interfaces.
I've also tested that I can reach the icons from my phone.
I've unzipped the generated package and it only contains the manifest.json with the correct ngrok urls.
My tenant has enabled sideloading of apps.
I am an owner of the Team I'm trying to sideload this app into.
Any ideas? Thank you!

The outline and colour are relative file paths to PNG icons. Please put both the icons (tab-44.png & tab-88.png) as part of package along with manifest.json file.

How can I deploy a web application onto an existing domain Meteor javascript

I am about to deploy my first client facing application built on Meteor JS. My client has a website - www.samplewebsite.com and I want to add my application's routes to that site so it would be www.samplewebsite.com/admin, www.samplewebsite.com/store, etc. instead of www.newapplication.meteor.com. I plan on using Heroku to host the application. Can someone point me to where I can find more information on how to do this? I apologize if the question is unclear since I am still learning the technical syntax.
Thank you.

You can use the meteor buildpack from https://github.com/jordansissel/heroku-buildpack-meteor
Do this in your meteor app's directory on your local machine:
Create a git commit
git init
git add .
git commit -m "Initial commit"
Create an instance:
heroku create --buildpack https://github.com/jordansissel/heroku-buildpack-meteor.git
Configure your app:
heroku addons:create mongolab:sandbox
heroku config:add MONGO_URL=<insert_value_of_MONGOLAB_URI_here>
heroku config:add ROOT_URL=<insert_url_created_above_here>
Then deploy it to heroku:
git push heroku
From this point you can use the guide here: https://devcenter.heroku.com/articles/custom-domains to set up your domain to match the heroku instance.
This way you can now use your own domain for your app.

Take a look at MUP. Its a command line tool and allows for very easy deployments.