I built a website using ReactJs, and to see the website, I generally do npm start and go to localhost:3000 via a browser.
I now want to host this website on S3, but without an EC2 instance. My understanding is that npm is a process, so it is server-side, and therefore, I would need to purchase compute to actually deploy my website.
I found this tutorial that does not mention paying for EC2 instance compute time: https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/
However, they still use NPM which makes me confused.
My question is: is it possible to use React if I were to only use Static S3 Website, without compute, and if so - how do I bypass NPM process?
React - component in seperate script does not work
In the above post, user tried to make a hello-world app in react, but all of the answers point them in the direction of making a server serve the content. I thought react is a front-end thing and can run without server-side processes. Is this true? Can someone explain why node.js is necessary or is paired with react, and whether is is possible to use react on s3 without ec2 compute?
It's possible to host a static react site entirely on s3. In this case, you would use node/npm only as build tools and to run your development server (localhost:3000).
npm would download your dependencies and you'd use node or gulp or webpack to build the assets into static files.
Then you would upload the files to s3 where it would serve the static files.
If you have some backend node code, then you would need to use ec2 or some other type of host. But if it's entirely static javascript, then there's no need for a node server.
Here are some links that might help explain in more detail:
https://medium.com/#omgwtfmarc/deploying-create-react-app-to-s3-or-cloudfront-48dae4ce0af
https://www.fullstackreact.com/articles/deploying-a-react-app-to-s3/
Try Gatsby! Here: https://www.gatsbyjs.org/
From the Github page: "Blazing fast static site generator for React"
Once you've generated your static pages, you can deploy on S3, Github pages...the choice is yours!
You can skip EC2 for your case. Here is why:
1) S3 Bucket + CloudFront (CDN) is really fast for static files serving. The React minified app is a group of static files which works best here. For the build of those minified files, I recommend using a CI/CD process or build them locally and just upload them to S3.
2) EC2 requires more work to setup, it consumes resources, it is not necessary for static files or React (unless you are using ReactDOMServer for dynamic content serving), and Node.js is not recommended for static files (Node.js get's blocked since it is single threaded so it is a best practice to keep static files away from it).
Here is a good article on the topic using Angular as an example: https://www.quora.com/Should-I-use-AWS-EC2-to-host-an-Angular-web-app-or-AWS-S3
Related
I have a google cloud static bucket serving my static site. It works great. Now I want to add a folder into that bucket that will run a react app. I want to use "next start" command, since i've compiled the js accordingly and assume it will build dependencies.
WHAT DO I DO?
I would normally make a daemon file to sustain npm run, ect. But with google cloud, what on earth do i do. I can't cd into the bucket to run commands. utterly confused.
please advise.
To use the buckets for static web pages what people usually do is to first deploy locally (in Cloud Shell, for example) and then upload all the files into the bucket.
There are some Medium blogs about how to do it in React or in Next.js. Anything that needs more interactions it would be better to handle it through App Engine or Cloud Run. And if the app with your static site are not related I would advise to build them in a different bucket.
If you want more information about the static website there is also official documentation about it with some examples and tips.
This is more of a lack of understanding on my part but I cannot seem to debug this.
I have a react app that I use Auth0 for some authentication stuff.
I recently moved my site on production from using a docket container to running from S3. I thought this was working but its clearly not today it times out when I click login
Request URL: https://undefined/authorize?
This just times out
It works from local host and no longer says undefined it has my auth0 domain
In my react app I store that Auth0 Domain value in a .env file. I am assuming my issue is that react in my S3 bucket does not have my .env file because gitignore. I thought maybe at build that was somehow pulled into a build file ? So when I do npm run build does it do anything with that .env?
How do I use my .env with react running in S3
This assumes that is what my issue is it seems to be.
I had multiple issues going.
Cloudfront was caching my site so as I was debugging I was not viewing my latest code. I had to invalidate cloudfront cache after each push.
I added my Auth0 secrets into github action secret and then used them with an env: section in my github action. That allowed me to use environment variables when github action performed the build.
All works now I was just tangled up for a short time.
I have been trying to run my react application on a subdirectory .
I am using a load balancer (ALB) to and redirecting my application on "directory" from "https://mydomain/directory".
But static file of the build was not being found by my application
added direcctory on package.json. "homepage": "/directory"
added basename on react-router-dom
in my networks index.html is looking for ".#####/directory/static/js" and css in the same way
i am only able to run my react build by redirecting static request to my react build, but this is not the good solution because i want to run 3 applications on my ALB and this will cause me change my assets folder name manually in the build, obviously don't want to do that.
I have been applying multiple solutions but couldn't find a proper solution please someone help in this.😑
ALB doesn't do redirects, and it doesn't do any sort of request path rewriting, it simply forwards the request to the target. You need to setup your server so it is actually serving the website from that folder, in other words change your assets folder name in the build.
If you don't want to do that, you would need to look at other AWS solutions like CloudFront which can proxy the request to a different path on the origin server.
I had a scenario of publishing react app with nginx inside docker with ci/cd. It took me setup a separate express server to serve app files and resolved the issue. Here is the repository synopsis of server.js that might help:
https://github.com/mkhizerali/store-pwa/blob/master/express/index.js
I'm using ReactJS and need some help with the build.
I am hosting a static site on a dedicated server.. in order to process that site I currently run my build locally and upload the 'build' folder to the server.
I've recently decided I should probably generate some static files for SEO (and adsense approval) and therefore I've added react-snap.
I run npm run build from my directory, and react-snap runs postbuild as expected however it fails unless I upload the build to the server first and then run the same build again to generate the static files (and then have to upload these again to the server for the static content to be available for search engine crawling).
I'm obviously missing a fundamental step in my build process here. I already want to refine it to a Git and push that to the server but I don't think this will help my react-snap problem.
Can anyone help?
Answering my own question for anyone with this problem...
My production variable for homepage was set specifically to the domain.. this is not required and does not allow for local crawling of the site. Explanation here:
https://github.com/stereobooster/react-snap/issues/153
I have a ReactJS application that produces a dist folder when I perform an npm build. This can be uploaded to Amazon's S3 and everything is fine.
I'm looking to continuously deploy this application, so my thoughts were to deploy to s3://RANDOM_STRING/, producing:
RANDOM_STRING/js
RANDOM_STRING/css
RANDOM_STRING/index.html
I can't tell S3, to the best of my knowledge, to use a sub-directory as a web-root, so I looked into CloudFront and updating the origin to the directory. This takes a lot of time to update and actually can't be done through the aws-cli, so continuous deployment would be ruined.
I've looked at using file-loader to rewrite my url() calls to include the RANDOM_STRING into the deployment assets, but this feels pretty "ugly"
Does anyone have experience of this kind of deployment and could help me out?
Have you tried setting your Default Root Object? You can configure it to be a sub directory.
See here: http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DefaultRootObject.html