This question already has answers here:
Blank page after running build on create-react-app
(17 answers)
Closed 1 year ago.
I'm a newbie to both git and AWS.
I bought a domain using AWS and have connected it to a Github repository.
I pushed the app to repository without initiating an npm run build.
After realizing that the website was showing the readme.md instead of the index.html which is inside of the public folder (not that that's working either), I decided to try to run npm run build and push that to the github repository, thinking that maybe that could fix my issue.
The problem I ran into was that /build is ignored inside .gitignore.
So I'm not sure if I should remove /build from .gitignore or find a work around, or something else I'm not aware of?
I would really appreciate some explanation from someone on that issue.
Thank you in advance.
So, there are 2 different things that we must break down from this question . One related to git itself and other is to the app build.
.gitignore tells git which files (or patterns) it should ignore. It's usually used to avoid committing transient files from your working directory that aren't useful to other collaborators, such as compilation products, temporary files IDEs create, etc. It basically does keep track of the specified file or directory
More related to that can be found in here:
http://git-scm.com/docs/gitignore.
Now, going to the original problem (which is building your app) github does have a CICD pipeline called github actions which essentially allows you to create a workflow based on a template that can help building your app. Therefore the build can be done when your is code is pushed, without have to send unnecessary files to your remote repository from your local npm run build. (You can find more related to this subject in this link:
https://docs.github.com/en/actions/guides/building-and-testing-nodejs?learn=continuous_integration)
That doesn't necessary solves your issue with your App (because we are not discussing anything related to coding), but if your problem is just building the app that would be a starting point.
My other recommendation would be also to check more on how git/github actually works and how you can take advantage of these systems in the future to deploy/control your code.
Hopefully this can help!
Found the answer to my question here. Thanks for the help guys.
Blank page after running build on create-react-app
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 understand that this issue has been raised numerous times, but I have tried almost all solutions available with no success. The thing is that I am capable of deploying to GitHub pages with no problem, but Heroku mentions I have some routing issue.
After the recent issue whereby Heroku removed Github integration with Heroku, I have been having trouble pushing code. Initially, my website worked fine, with automatic deployment via Github. However, when I try manually pushing via:
$ git add .
$ git commit -am "make it better"
$ git push heroku master
I am facing this error:
Module not found: Error: Can't resolve './pages/MainPage' in '/tmp/build_8986ef5f/src'
I have tried removing this page, and the error will just change to another can't resolve path error.
My file directory is:
- build
- node_modules
- public
- src
- pages
- MainPage.js
- SecondPage.js
- ...
- App.js
- index.js
.gitignore
package-lock.json
package.json
Within the App.js file, I import the library through a relative path via:
import Home from './pages/MainPage';
Is there something wrong with my relative pathing? I have not changed the structure since deploying via Github so I don't know what's the error.
I've found out the error. Apparently deploying to Github had resulted in some case-sensitive naming to go wrong. E.g. although I was deploying it as MainPage, it was deployed as mainpage for some reason.
This had resulted in being unable to find the file path.
I used:
heroku run bash
To figure out the error of naming convention. To fix it, I removed all affected folders with wrong casing deployment, committed changes, then readded them in and redeployed it. It worked after I did this.
Thank you #dfwgwefewfwe! I don't have enough reputation to comment on their post, but it definitely fixed it for me.
Just to add some extra information though for others that may be stuck with it:
My issue was that I had some assets that were in folders such as
Equipment
/hands
/gloves1.png
/gloves2.png
/feet
/boots1.png
/boots2.png
To make things more consistent, I just capitalized the first letters to be Hands and Feet
I ran that command
heroku run bash
and was able to find those folders that had been renamed, and they were still in their old version.
So back on my local copy, I moved the whole Equipment folder to another location, removed any references to the assets in the code, and pushed that up to heroku.
Now the Equipment folder was removed on the server, then I was able to revert my last git commit and push exactly what I was trying to push before and it worked.
I hope that this helps someone else!
I am learning React with my son using VS Code a and we are having a hard time properly syncing and setting up how to work with the same files on Github.
We have a repo with source files. Let's call it 1st-repo. His PC is fine as he has control of the repo (master). I would like to fork this repo (I think?) so I can have all the files and make my own changes.
I'm really not sure how to start in VS Code. DO I first do a blank app "npx create-react-app {name}" then clone? Or do I set it up through git/github in VS code.
Once there is the initial setup I would love to see how people work together.
You definitely don't want to npx create-react-app {name} as this will create a new application project.
If you are simply wanting to work on the same project at the same time then you only need to clone the Github repo to your machine.
git clone <link to repo>
Then change directory into the project and install the project's dependencies. This assumes you already have node installed on your machine.
cd <project directory>
npm install
From here you can open the project up in VSCode, make your changes, and commit & push them back to the remote repo. I suggest getting familiar with Git and the pull, commit, and push commands. Also get familiar with creating and switching between working branches.
Git cheet sheet
If you and your son are working on the same code in the same branch at the same time then merge conflicts will likely arise when either of you are pushing your changes back to the remote. Get in the habit of pulling any changes from the remote before you commit and push your changes, it's easier to resolve conflicts this way. VSCode even makes this stupid simple in the GUI.
VSCode also features a VS Code Share extension, called Live Share, that allows you to work in a shared window. You can see each other's cursors and position in the code.
Good Luck.
this is my first post on stackoverflow. I'm writing because I couldn't find a clear answer to my question. I don't know if the title is the right way to put it but it's what I went with.
The Situation:
I'm creacting a single-page-application with react and intend to build the back-end with node.js and express.js, but for now it's just react. I used create-react-app to create the project and I'm using Firebase for hosting.
The folder to deploy in the firebase.json file is set to build. So when I want to deploy my web app to firebase, I use the npm run build command first to create the build folder which will be deployed.
When I then go to my website, open the chrome developer tools and click on source I can see all my files inside a static folder. I see it just the way I formated it, as if I was inside my code editor. All the components. My entire folder structure. Basically the whole code of my app is viewable in it's entirety.
I was a bit shocked and confused so I checkt if this is normal. I went on big websites like youtube or twitter but I could find hardly anything in their source folder. When I view the source of twitter it does have some files which is just plain and open javascript but not alot. And also the folder structure is not visible. I need to view files using Ctrg + P. Most files look different too etc.
It's best if you just have a look at the source section for twitter in the dev tools. I don't really understand what I'am seeing but I notice it is diffrent when compared to my website's source.
Their webpack somehow doesn't map the bundle out into plain readable code. My bundles in the build folder are mapped into exactly what they were before being bundled. At least that is how it seems to me.
Simple and short: Source of my website shows everthing (all the files) just as it is and for everyone to see. Source of big websites it doesn't do that. Their's is somehow concealed. And I want to know what they did, how they did it and how I can do the same.
I have seen many people say that it isn't important if it is no security risk and I know a bit about obsfuscation, but I believe they do something else too.
I also want to emphesize that this isn't about if I need to do it or not. I want to do it but I dont now how or what. I haven't found any place were this was adressed completely so I really don't understand how it's done.
I am thankful for any help I can get.
put GENERATE_SOURCEMAP=false in the package.json scripts -> builds and then run npm run build. Hope it will work.
"scripts": {
"build": "GENERATE_SOURCEMAP=false react-scripts build"
}
check this reference How to disable source maps for React JS Application
You are basically looking for a module bundler and there are a lot out there, the most used is https://webpack.js.org
It is very simple to use and there is an online tool to help generate the config file for different use cases https://createapp.dev/webpack/no-library
What webpack does, it will create a bundle.js for you so at the end your project will be just two files index.html and bundle.js
I merged my branch with master, git merge master, and had a few conflicts. When I did this, my app was running and threw parser errors about the <<<<<<<... lines as expected.
I resolved the merges and now I'm getting the same error, but there is nothing in my code!
I can search the project for <<<< and find nothing. I've restarted my app npm run start, even switched branches, and it's stuck there. Made a new folder and recloned the project and that cleared it out. Any idea why/how this happened? How do I make sure this doesn't happen again.
It seems that a cache problem exists between webpack cache and resolving git conflicts.
the solution is:
stop your app
remove node_modules/.cache
start your app
It's possible that when you were trying to resolve the merge conflicts, pieces of your code were not marked as resolved.
A personal tip:
Using a GUI interface when resolving merge conflicts will help tremendously.
Applications like Github Desktop or using Github's own merge conflcit resolve will help better see your changes.