I have been running into this error "Could not find a required file. Name: index.html" when I attempt to deploy my React Portfolio to Heroku. I have looked at previous answers and I have not found a solution. I do not have my public folder in .gitignore and I will attach a photo to show.
Do I need to add certain "scripts" in my package.json that I may be missing. I also tried buildpacks after watching a youtube tutorial and that did not seem to work either.
If you're deploying from Git, anything gitignored will not be included in what gets deployed. Rather than ignoring the whole public directory, you could ignore only some files, for example public/*.js.
EDIT: see comments, I misread the question.
The solution to this was that I did not have all my files at the route. Simple as that, I just needed to delete the parent folder and move all files to the route of the directory. I had them nested within 2 folders, I had moved them out of one of those folders thinking it was at the route but it needed to go one more folder out and that was the issue that I was having.
Related
I uploaded a react app on github repo and after pushing the code, I am seeing a new static folder instead of public and src folders, and the code is non readable in the repo.
https://github.com/Rohitkumar123github/random-suggestion-using-api
It will be easier if someone visit and see it.
I am new to github and i saw some videos on github hosting websites and when i tried to host my website i am seeing this static folder in my main branch instead of public and src. I want to use github to show my project source code and a running website to potential hires. But the source code is non readable right now.
did you add the src, public, and other folders that you said in the .gitignore file? check this file, those folders mustn't be in the .gitignore file;
and check out that did you add those folders to the git stage before committing? (git add -A)
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 have two webapps - "manager" and "viewer" - coded in separate VSCode projects. These are deployed to a common Firebase project where they share a common database. The "manager" webapp is used to maintain the database and the "viewer" provides public read-only access.
To create the "page" structure I have added a robocopy to React's build script for each VSCode project to produce a structured "mybuild" folder with the page subfolder within it. Firebase.json's "public": setting is then used to deploy from "mybuild".
Individually the two pages work fine, but each deployment overrides the functionality of the other. So, following the deployment of "manager", webapp/viewer returns a 404 (not found) error and vice versa.
To cut a long story short, the only way I've found around this is to manually copy the results of a deployment for one project into the "mybuild" folder of the other and then deploy from this. But this is no way to proceed.
I think I've taken a wrong turn somewhere here. Can anyone suggest the correct "firebase solution" for this requirement? In the longer term I'd like the viewer webapp to be available at the root of some user-friendly "appurl" while the manager is accessed via "appurl/manager", but other arrangements would be acceptable. The main issue right now is finding a simple way of maintaining the arrangement.
I needed to fix this fast, so here's my own answer to my question.
It seems that when you deploy a project, firebase replaces the current public folder for your URL with the content of whatever folder is specified in your firebase.json. So I decided that I had to accept that whenever either of my projects was deployed it must deploy from a "composite" folder that contains the build files for the other project as well as its own build.
That being the case, it seemed I was on the right lines with my "manual copy" approach and that what I now needed to do was simply to automate the arrangement.
Each of my projects now contains a script file with the following pattern:
npm run build
ROBOCOPY build ./composite/x /E
ROBOCOPY ../y/build ./composite/y /E
firebase deploy --only hosting
In each script, x is the owner project and y is the other. Additionally, firebase.json in each project is edited to deploy from composite.
When I run the script for a project it first builds a composite folder combining the latest build state for both that project and its partner, and then deploys the pair.
The final twist is to tell the react build process that the result is to be deployed from a relative folder and so that the build therefore also needs to use relative references. I do this by adding a
"homepage": "https://mywebapp/x",
to the package.json for each project. Here, x is the name of the project.
I'm not able to convince myself that there's not something wrong with my whole approach to this issue, but at least I have a fix for the immediate problem.
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 have created a reactjs app which is inside the Loopback folder.
I put a folder tree image below. as the picture inside the client_src have react files.
I have used loopback-storage-component to store images. Those images are stored into files folder.
Now, my problem is to get stored images from files folder. So that, I used
<Img
src={require("../../files/revenue_Licence_Copy/5.jpg")}
/>
while I run reactjs App using npm start into client_src folder.
Then I got an error
Module not found: You attempted to import ../../files/revenue_Licence_Copy/5.jpg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported. You can either move it inside src/, or add a symlink to it from project'snode_modules/.
How to solve my problem
I refer below link
enter link description here but that also not solve my problem..
Please anyone help me?
So basically, you can do a symlink which links a folder inside your app folder to a folder anywhere else on the system. However, if at all possible, please avoid doing this. While a valid solution, it creates a whole bunch of problems in deployment, or moving the repo around. If you work with someone else, they have to have an identical setup as well etc. Moving the folder to the project folder, or having a backend serving data you want is a much better approach.
However, if you really wanted to, you could do, from inside the project folder's node_modules, so from the project root:
cd node_modules
ln -s ../../files ./linked_images
which would link your files folder to a folder called /linked inside the node_modules.
You can then reference the image inside by doing:
<Img
src={require('images/revenue_Licence_Copy/5.jpg')}
/>
Here's a stack answer explaining symlinks