From reading around, I have a similar problem to what is stated here:
Angular 2 and Eclipse - Failed to load resource: the server responded with a status of 404
The project structure is (created by ionic):
- main
- node_modules
- www
- js
- app.js
- index.html
- package.json
A link to one of the files in node_modules looks like this (in index.html):
<script src="../node_modules/angular-bootstrap-datetimepicker/src/js/datetimepicker.js"></script>
WebStorm can find the file and has no complaint in the IDE
When inspecting the network in the console, I can see it's trying to find node_modules in www.
So the route URL is http://localhost:8100/
The path for app.js is: http://localhost:8100/js/app.js
The path for datetimepicker.js is: http://localhost:8100/node_modules/...
So it's looking for node_modules within the www directory which I am not entirely surprised about.
Since this structure was setup by ionic and the project has just got larger, it's difficult to change the structure (which I thought would be the most viable to do). But are there any other work arounds I can do to get this working?
Also, since I select to move up a directory (..) to look for node_modules, does the webapp just omit this as it knows of no other directories higher than itself?
EDIT:
Looking at this question, I have followed the advice given by moving the datetimepicker.jsinto www/lib but it's still not working. Have not attempted to use bower yet
Open Your command prompt .Go to your project directory and run npm Install Hope this will solve your problem
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/
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 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'm trying to debug a really bizarre issue. As part of the build process on a project I'm working on, a bower_components folder is created with all the packages listed in the bower.json file. This process seems to complete successfully. However, when I refresh the project and view it in the browser, there is a single missing package (in this specific case it is angular-ui-sortable). The package is present in bower_components directory on the server, but absent when viewing that same directory in Chrome devtools. The missing package is breaking the UI since Angular throws an "$injector error" because it is unable to find the missing package. The question I have is, how do i even begin to debug this issue. I've confirmed that I'm looking at the correct folder as well as checked the missing package's permissions. I've also confirmed that the package is correctly included in the project's index.html file.
Any advice is greatly appreciated.
Thank you.