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
Related
I've recently tried getting into the whole Node ecosystem and am trying to set up some continuous deployment for my app to AWS Amplify.
For background, my project structure looks like this:
project
public
index.html
src
App.tsx/App.js
package.json
As far as I know, this is basically what create-react-app gave me to start with, and I didn't change the file structure.
For most of my time working on the app, I've been able to go to the base project directory and use
npm start
to launch the app. This will bring me to the App.tsx/js homepage.
However, when I hosted this to AWS Amplify via GitHub, the default build settings actually point to the public directory, so the published site is actually point to index.html (which is basically just an empty placeholder).
While debugging, I ran
npm build
in my root project directory, which constructed a build folder, so now the overall project looks like this:
project
build
index.html
public
index.html
src
App.tsx/App.js
package.json
Now, running
npm start
will bring me to the index.html from the build directory, instead of App.js/tsx as it used to.
The AWS setup says that it will run
npm build
so I assume that what I've done on my local machine is mirroring what the AWS server is doing behind the scenes and explains why AWS is serving the empty index.html.
I've read a few articles and watched some videos about hosting a create-react-app on AWS, and in every version, it looks like AWS will serve the App.tsx/App.js right out of the box, rather than build/index.html, and I've not been able to find a good guide on how to configure this behavior. Quite frankly, there is an overwhelming number of similar-but-slightly-different answers for questions like this, which use different combinations of package managers, packages, hosting services, all on different release versions, with different setups, and it's very difficult for me to tell which ones apply to my scenario.
So I'm hoping someone can help straighten some of this out for me, or point me towards a good resource for learning more about this type of thing. Particularly interested in learning the right way to do these things, rather than a quick hack around whatever my particular issue is.
Some specific questions...
Is deploying things from a /build folder standard convention?
Why does create-react-app create a separate /src/app.tsx and /public/index.html that seem to be competing with one another as the app's "homepage"?
Why does the behavior of
npm start
change depending on whether
npm build
has been run?
Is the correct fix here to just insert my App.tsx component into the index.html? This doesn't seem hard, but doesn't seem right either
I have seen a lot of answers discussing tweaks to webpack.config.js to solve issues like this one. My project does have webpack installed, but as best I can tell, there is no webpack.config.js anywhere. Am I expected to create this file, or should it exist already? In either case, in which directory is it supposed to live? I've seen a couple answers saying it should be in /node_modules/webpack/, but also some saying it needs to live in the same directory as package.json
Things I've tried already: Spent a bunch of time reading through other StackOverflows and watching a few videos, but as outlined above, I'm finding it difficult to tell which could apply to my situation and which are unrelated, given the huge number of unique combinations of build/packages/platforms/versions. Also spent some time monkeying around with file structure/moving code around, but not very productively.
Eventually found my issue. In the production built version of my app (aka, /build), the bundled script created by webpack was failing in the browser because exports was undefined, so index.html was being served in its vanilla state, rather than with the TSX/JSX content. I changed the "module" property in tsconfig.json from commonjs to es6 and this fixed most of the problems.
Also of note is that the reason I couldn't find my webpack.config.js is that I had hidden ALL js files in my project, so VSCode wasn't finding it. I swapped to the suggestion from this blogpost to hide only js files with a matching TS file.
For general learning about how create-react-app works, I eventually found this page, which I found helpful:
https://blog.logrocket.com/getting-started-with-create-react-app-d93147444a27/
For the basic create-react-app
npm start
Is a short command for react-scripts start that sets up the development environment and starts your development server usually localhost:3000
npm build
After you are done developing, this command short for react-scripts build correctly bundles your app for production and optimizes the build for the best performance.
The files generated in the build folder are solely the files you serve to the public folder accessible by the public URL.
In short the files in the build folder should be copied to the public folder
AWS Amplify
Provides a CI/CD process where you don't have to set all this up by yourself, as long as you have a well-configured package.json file.
There are so many methods to deploy your react app to a production server but using AWS Amplify this link might help you out: https://youtu.be/kKwyKQ8Jxd8
More on create-react-app deployment: https://create-react-app.dev/docs/deployment/
I'm trying to deploy a Gatsby-Contentful site to Netlify and while deploying it gives me build error. While testing in localhost its working perfect.
Here is the screenshot of the error:
While in production the npm run build command is working perfect.
I have tried this solution but it doesn't solve the issue.
Invalid plugin options for "gatsby-source-contentful"
Link to the code on github is Here
I think there is something wrong with the contentful API keys while deploying but I can't figure out what is it.
You must setup environment variable on Netlify
Netlify environment variables are accessible during your build. This allows you to change behaviors based on deploy parameters or to include information you don’t want to save in your repository
Go to your site > Site Settings > Build & deploy > Environment variable, and add your variables
More details in this doc
Update 2021-06-29
The problem turned out to be process killed while querying during build on Netlify. AVIF transformation while querying gastby image data causes resource exceeded on Netlify. Netlify team and Gatsby are still working on this.
The temporary solution now is to exclude AVIF from query.
Discussion post
Try to profile your memory application if it's consuming a lot of memory during npm run build on your local setup. In my case it was peaking up to 1.5 GB and Netlify will trigger an error build during deployment.
Adjusting the CPU Count to a lower number did the trick for me. Site Settings > Build & deploy > Environment variable
GATSBY_CPU_COUNT = 2
Reference: https://www.gatsbyjs.com/docs/how-to/performance/resolving-out-of-memory-issues/#try-reducing-the-number-of-cores
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've just used Yeoman to create an Angular project that looks great when I run grunt serve. But then I decided to view it by running http-server, and the page gets displayed without the formatting and without the images. Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?
I discovered that I had to run grunt to build the project which fixes the references and places a distribution uglified version of the project in a dist folder. This ran just fine on my other server.
"Does anyone know why that is and if I'll run into this issue when I push it up to my web hosting server?"
Yes, you will run into this problem on your web hosting server.
grunt-serve serves the app used the setup on your local machine.
http-server mimics how a real web hosting server would evaluate your references.
My development routine is to use grunt-serve until I have a working version and then use http-server to test it out and see if it would work before I push it to my web hosting server. As #cdavid mentioned, running grunt build from your dist directory should be sufficient for general dependency issues.
I'm pretty new with Pycharm and since this morning i have tried different configuration to use the Run command with an existing Google app engine project but without success.
I have a pretty clear error :)
google.appengine.tools.devappserver2.errors.AppConfigNotFoundError: no app.yaml file at '.'
Nothing wrong with that because the existing project use a custom file call app_dev.yaml. So it's normal that Pycharm is unable to load the server.
How can i change this behaviour and tell Pycharm to use app_dev.yaml instead of app.yaml?
Is it possible?
Thanks
I input an app.yaml on root directory and reloading my project, this working for me.
While the PY-9714 issue was, indeed, closed without a resolution, the automatic '.' added to the Run configuration has been reconsidered in PY-10675 in light of GAE support for multiple modules/services inside the same application and/or request routing using a dispatch.yaml file.
So in the more recent PyCharm versions it's possible to specify one or more .yaml files as options in the Run configuration. See for an example Pycharm multiple modules Run server
For those still running an older Pycharm version without the fix, a solution using a wrapper script is described in Run App Engine development server with modules in PyCharm