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.
Related
I have a flask based server running on GAE doing some complicated calculations. It exposes a RESTful API.
Now I'm planning to build a nice front for it with React. All it will do is showing a fancy form and sending requests to the API with parameters, and receiving calculation results from the flask server, and showing some nice-looking charts. And due to the long time the calculation requires, I'm considering adding WebSocket to it too.
A node.js server seems too redundant for this purpose.
How should I host this kind of simple React apps?
Is it possible to simply upload the built HTML and JS to a bucket and host it as a static site? If it's possible, some detailed instructions would be very helpful!
I would assume you go through the below URL to create your react app.
https://reactjs.org/docs/create-a-new-react-app.html Once you create the react-app it will automatically include react-scripts package in your package.json file. It would have automatically included the "build": "react-scripts build" in the scripts section. Now in the command prompt if you just run "npm run build" it will create all files in the ./build folder. Copy all the files from build folder to bucket. You must setup index.html as index using gsutil, else it will not work. Additionally if you are invoking any api's set up CORS policy on the bucket as well using the gsutil.
I am trying to deploy a simple "hello world" application in Appengine standard - Go environment. There is one source file hello.go with one import "google.golang.org/appengine"
I followed the documentation here to use the Admin API for deployment. But I got "can't find import: google.golang.org/appengine" error when I checked the status of the deployment.
So I uploaded the google.golang.org library folder to Cloud Storage, but documentation seems to only show how to include single files separately from GCS buckets, which is not feasible for big imported libraries.
I know all this will work with "gcloud app deploy", but I have to use the Admin API and standard environment.
Is there a way to tell Appengine to "go get" imported libraries?
Is there a way to include folders (not single files) from GCS bucket in
deployment config files?
The deployment works with gcloud because the appengine library is present in your GOPATH. gcloud fetches them from there.
In the case of the deployment using Admin API, in order to not include one per one all files from your libraries, the packages need to be present in Google Cloud Storage for ZIP deployment or you can use Cloud Source Repositories, build it with the CREATE call and then deploy it from a container with the Cloud Build image.
I have a frontend create-react-app and a backend API using Expressjs.
I deployed the backend API to Google App Engine successfully.
But now I need to deploy the create-react-app to Google Cloud and it becomes very confusing, I tried to google for a while and there is no true/recommended way for this.
At least I saw that other people suggested doing it in 2 ways:
Using Google Cloud Storage:
Run "npm run build" to create the "build" folder
Upload this whole folder onto a bucket
=> I see that there is one drawback using this way: When I tried to reload page 'url/aboutUs', it's not found. So I have to go back to 'url' then click the About Us link
=> I guess that the React Router that I'm using is not working with Google Cloud Storage
Using Google App Engine
=> People just talked about using it, but I can't find any guide/tutorial for this.
So what is the recommended way to deploy create-react-app to Google Cloud?
And can you please provide a tutorial for that?
Thanks.
You just need to configure the Cloud Storage bucket to serve index.html as the 404 page.
For Google App Engine, you can use serve or set up nginx to serve index.html in the build folder.
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
I am new to python and google app. I have an already created application in python and
google app engine. I have downloaded source code of the app and customized it. The source
code which i downloaded doesn't have app.yaml and index.yaml in it. Now i want to know that if i upload my app on google app engine without app.yaml and index.yaml then is there any chance that my data on live server get lost. Please show me right path i am doing any
thing wrong. Also i dont know how to upload a single file on google app engine. Should i have to upload whole app ?
i have used following command for downloading source code on localhost:
appcfg.py download_app -A <your_app_id> -V <your_app_version> <output-dir>
You cannot upload an application without an app.yaml. The app.yaml file contains the necessary configurations to run your application like handlers to use, application ID, runtime, and so on.
Also, you cannot upload a single file to App Engine, you always upload the entire app.
I strongly suggest you do the "Getting Started" guide:
https://developers.google.com/appengine/docs/python/gettingstartedpython27/
before you invest more time in trying to figure out why things don't work.