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!
Related
I've been following the guide found here, https://unixcop.com/how-to-install-pimcore-on-ubuntu-20-04/, to install the PimCore X version from scratch on a fresh server.
However, after going through all of the steps and firing up the initial home page, I get the profiler complaining about a number of 404 errors for resources that it cannot find within the /_wdt/ folder, with the profiler never loading.
The admin section of PimCore cannot be loaded either, it comes up with a big 404 error, so I'm guessing that the router isn't working properly. Looking into the log files for both PimCore and Apache, there isn't anything useful to be found.
I've tried to install PimCore several times, each with the same result.
Any help would be gratefully received.
It turns out that the .htaccess file within the /public/ folder wasn't being installed with the fresh install. The .htaccess file contents can be found here, https://pimcore.com/docs/pimcore/current/Development_Documentation/Installation_and_Upgrade/System_Setup_and_Hosting/Apache_Configuration.html
Best way to install Pimcore are using docker.
You can read it on github page https://github.com/pimcore/skeleton
All that you need is install docker.
You can do it from this link https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-20-04
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/
When I deploy my React App to Github Pages with 'npm run deploy' I am consistently running into a 404 'File not found'. The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.
One concern I have here, is finding that other operational Github Pages repositories only contain the build folder in their 'gh-pages' branch, not the rest of their source code. A second point of confusion, is that on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.
So, my questions are:
Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?
Can you describe a process to update the site once it's up?
If you want to check out my repository, you can find it at:
https://github.com/edmundweir/doe-website
And the site I am trying to get live is:
https://descendantsofearth.com/
Any help on the matter would be immensely appreciated as I am 500 metres down a troubleshooting rabbit hole and my flashlight has run out of batteries.
With thanks,
Betty.
TLDR: Delete the gh-pages branch on GitHub and then run npm run deploy.
404 'File not found'
This is happening because your gh-pages branch does not have an index.html file at the root and you didn't specify a source folder to use in the GitHub Pages settings. A quick remedy here would be to set the source folder to be /build, but that won't achieve the setup you're looking for with the gh-pages npm pkg.
The site is building from the 'gh-pages' branch in my repo, which I have made match my master branch with all of my source files.
This is the root cause of your issue. Your deploy npm script is currently set to commit the contents of the build folder only to the gh-pages branch. The package will manage this branch for you as a branch with a completely separate history from master.
on two occasions now I have committed/pushed my site as described above and it has all worked... until I've gone to update something and the 404 returned.
Possibly it worked when you ran your deploy script and then you later broke it by manually pushing to the branch?
Do I need to set up my 'gh-pages' branch to only contain my build folder so that it can find my index.html and not 404? If so, how do I set a branch to only hold a specific folder and not have other files merged into it?
The package is handling all of this for you, which is really cool. For some history - when GitHub Pages first came out - the instructions were to create an orphan branch where you would push your static build to, manually. Note that there are a few ways to achieve this though.
Can you describe a process to update the site once it's up?
master should not contain your static build, just like it doesn't contain node_modules etc. You should add build to your .gitignore so that it doesn't get committed. That way you're only committing the actual source code - which minimizes the size of your code base and gives you a clean revision history.
Whenever you want to "deploy" your changes, you should run npm run build to build your static app from your source code and then npm run deploy to have gh-pages push your static build to the gh-pages branch (which GitHub Pages will then use for your site).
I was trying to deploy a project I made in ReactJS - a tetris game to be exact - and I am coming up with the following error:
On a different stack-overflow post, I read that most likely this is happening because
Most likely there is a reference to manifest.json somewhere in the project, while the file/resource itself does not exist and that I should look for link tags containing rel=manifest.
So I went into my index.html folder and removed the following:
<link rel="manifest" href="/manifest.json">
So after making the changes and updating my code, I pushed to Netlify (netlify deploy, netlify open) and I keep getting the same error. Does anyone know what I may be doing wrong? The project runs perfectly on localhost.
EDIT: adding Network tab image
You do not need to remove manifest.json file. What you need to do is simply connect source code to the version control.
You need to add _redirects file to the public folder. (no extension for this file). add this line to it.
/* /index.html 200
From this, we hope to show components accordingly whenever link updates with components.
Then follow the below steps to host your site easily,
Add your source code to the Bitbucket repository. (connect your local folder to repo)
If you have build remove that folder.
Go to Netlify and link your Bitbucket repository and desired domain.
That's it! Whenever you push the new version to the master branch it will auto-deploy. (No need to build anymore! - make sure to enabled auto-deploy settings to the master branch)
Just use these tools easily. Don't use a lengthy way and make things hard.
I've followed all of the guides for directing a custom domain to a Github project page on both the Github end and the DNS's end. The Github Pages hosting for the project was working before the custom domain, but now either nothing works or just the normal Github Pages works, but not the custom domain.
I've tried moving everything around, renaming CNAME files, everything has had time to propagate, it should be working, but I'm at a loss for what to do. I've tried putting the CNAME file both in the master branch and the gh-pages branch. I've tried setting the CNAME either by hand in the file or automatically in the repo settings. All of this to no avail.
I can tell that it should be working because when I visit the custom domain it is definitely pointing to Github as it returns a 404 with no page found.
I spent several hours pulling my hair out over this issue and figured I'd post the solution in the case someone else came across it as well.
The simple issue is that when react-scripts build runs, it ignores the CNAME file in the root directory and completely overwrites anything in the build/ directory which in turn completely overwrites the gh-pages branch, so adding CNAME to that will solve the problem temporarily: until the next time you push.
The solution is extraordinarily simple: move CNAME from / to /public. react-scripts will recognize this as a static file to be served, just like a favicon and will always copy it to the gh-pages repo and include it in the build without you having to manually do it everytime you deploy.