Shopify CLI 3.0 Ruby app not rendering UI in production - reactjs

I've been trying to deploy the default shopify rails+react app generated via shopify cli
Deployment is successful but the UI doesn't get rendered. I get a blank screen with the message "This app does not appear to be loading and may be outdated. Try reloading the app in the legacy admin or contact the app's developer to update the app."
The same issue persists when I load the app in legacy admin (.myshopify.com/admin instead of admin.myshopify.com/)
For now, I've tried the following:
Running the Dockerfile locally
Run all commands from Dockerfile locally - bundle install, npm install, rake build:all and rails server -b 0.0.0.0 -e production
Deploy the app to production on cloud66 (which runs the default Dockerfile)
All 3 have the same issue. Don't see any errors in Rails logs as well.
Can anyone help please?

Turns out I missed RAILS_SERVE_STATIC_FILES flag as mentioned here. Not sure why it needs to be added explicitly, but it worked after I added it!

Related

what is the optimal way to deploy a React app after building it

I've run into some confusing issues when I try to deploy my React app.
I want to deploy my app for production and I would like to know what is the optimal way.
I already tested it with Heroku, but Heroku doesn't walk you through many details, I just had to link my GitHub repo and Heroku does the rest.
I ran 'npm run build ' and tried to deploy the app and run it on localhost, just to see what it would look like, but unfortunately, it does not work:
log

Deploying ReactJS app from GitHub to Ubuntu via Actions

My team is working on an NodeJS app with a ReactJS frontend that needs to be deployed on our Ubuntu server. It runs fine locally and it used to run fine on the server until we added a Router/Switch structure into the App.js. Now we get 404 and 502 errors and I'm thinking of adding some GitHub action to automate the deployment process with npm run build and all. Ideally, every time we push to GitHub, the app on the server should update without someone having to tunnel in and type something manually. Can anyone suggest a ready-made YAML file for that purpose? How would we trigger it on our Ubuntu server? Would we run it under nginx (like now) or apache?

Connect create-react-app to django backend without having to run build

I connected my react app that I made with create-react-app to django by passing it in as a template. I followed the steps shown here: https://studygyaan.com/django/django-react-setup-best-project-structure.
This works but if I want to try out a full backend server by running manage.py runserver, I have to do npm run build on the frontend app all the time. Is there a way to get it so that I could maybe connect the development components to django instead of the build components? Running the build command always takes a bit of time.

How to build react app for production without making the website offline?

Is it possible to build react app for production using npm run build without it making the site offline? I am using nginx to serve the react app and when I run the above command, I get Internal server error until the build is finished. It would be nice if the old version of the app is served until the build is finished.
You shouldn't be building your application on the production server. Build it locally, then deploy it to production and this won't be an issue.

Unable to resolve "./aws-exports" from "App.js"

I have been building an app with awsamplify for quite some time now. Today I descided to run some test and when I did
npm run start-web
Everythin worked fine. Now I went on to run mobile test with the use of Expo and ran
npm run ios & npm run android
which both returned the following errors.
Unable to resolve "./aws-exports" from "App.js"
Building JavaScript bundle: error
my problem is similar to the one below just its amplify and not awsmobile
https://github.com/aws-amplify/amplify-js/issues/669
Deos anyone know what I can do to resolve this?
Thanks alot!
I jsut removed some unused imports and the error changed to this
Unable to resolve "#aws-amplify/ui/dist/style.css" from "node_modules\aws-amplify-react\dist\Amplify-UI\Amplify-UI-Components-React.js"
Barely mentioned in the AWS docs:
For setting up a local dev folder, from an existing amplify repo, use an amplify env pull,
It will "pull" the ./aws-exports.js from the server, the latest one that was pushed there,
similar to git push and git pull but for the amplify env
It's true that an amplify push will create the ./aws-exports.js file,
but it will also "push" it to the server, overwriting whatever is there.
amplify status is also a handy command, similar to git status
I ran amplify env pull
and then found it in the ./src/aws-exports.js
not sure if the pull did it, or if it was always there but this is for an existing expo project
Confing your projects, using terminal go to the main folder and amplify init to config your project
amplify init
Do you to use an existing environment? (Y/n) Y
Choose the environment you would like to use: dev
Choose your default editor: Visual Studio Code
Choose the type of app you're building: javascript
What javascript framework you're using: ionic
Source Directory Path: src
Distribution Directory Path: www
Build Command: npm run-script build
Do you want to use an AWS profile? Y
Please choose the profile you want to use: select your personal IAM profile

Resources