I have a React app (via create-react-app).
I handle file uploads and place them in /public/images/uploads and then access via URL like http://myapp.com/images/uploads/blah.png. This works fine in development.
When I npm build and use serve, I cannot access dynamically created images via the URL. If I rebuild, I can then access them.
I'm obviously missing something here. Thanks
UPDATE: I did an eject on this app.
Noticed the contents my public/images directory are copied at build time to build/images and all requests to http://app.com/images/test.png and served from build/images.
Is there a way to let webpack, which I assume is responsible for this Should I just create my images in build as well? Seems odd.
Related
i created a create-react-app and want to use filetypes like webp or mp3.
When i run my application on localhost via npm run start everything works fine, but after my deployment on my server (which uses npm run build and delivers the build folder) it doesn't load filetypes like mp3 or webp anymore. Why is this happening? i think its any simple configuration in react or anything like that, but i cant solve this problem by my own. Thanks for your help.
The issue may be with typescript (if that is what you're using). Typescript will convert .ts and .tsx files to .js, but not move most other files over to build. If they are in a separate assets directory, you have to ensure that gets deployed too. If this is the issue, you have a few choices.
You can manually move the files over to build as a 'post' deploy step (using say, a shell script).
You can use a bundler like webpack to help you maintain the references to those other assets and bundle them correctly.
I finally found the problem that caused this behaviour. Amazon AWS Amplify creates a rewrite rule for single page applications (SPA). You can find this setting under Rewrites and redirects in your Amplify application settings. There you will find a rewrite rule with following source address:
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
...change it to...
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json|mp3)$)([^.]+$)/>
... for example, to allow mp3 files. This is also important to allow webp-Images or woff2-Fonts.
I want to run react from the HTML page so that it is displayed on the browser. Till now I was using node to run it but now I want that when I open my HTML file in the browser my react app should run there.
A production build might be what you need. Try executing npm run build (or yarn build, if you're using Yarn).
This creates a production build of your app in the build folder, which contains index.html along with other static files. Running index.html should run the app in your browser.
A production build is meant to be served to the end user, so remember that you won't be getting any nice crash messages or stack traces that you get from running it on Node. Neither would development-related niceties like hot-reloading work. If you're still working on your project actively, keep using Node.
By the way, if you just need to make any changes to the HTML file of your React app (like changing the title or adding an external script), you can do that in public/index.html too - you don't need to create a production build for that.
Typescript just relase 3.7.3 with optional chaining, so I wanted to upgrade a project for this feature.
However, after runing yarn upgrade --latest, and doing yarn start, the app will reload infinitely.
After couple days of debugging. This is what I find out, it seems like if anything changed recently on /public folder, then the app will be Navigated to http://localhost:3000/ which will cause it to reload infinitely due to the design of my app.
The project was working for previous dependencies, so I am not sure whethere it's a react or electron upgrade that they changed it such that the app will watch for /public folder. When public folder changed, and causing the app to navigate to localhost:3000. Anyone know what's the cause of this phenomena? And the reason behind this change, and also how to pass around this?
By the way, my app was a simple epub reader application. Currently, my app will load all the images, css files and stored them to public folder (delete those files on unmount). Thus the app can load these images, stylesheets. (I just tried to store these files just inside the src folder, and it seems react won't be able to load these resources dynamically).
I built an app in React with create-react-app. Just JavaScript, CSS, HTML & React. I ran npm build then deployed the app to Netlify.
I want to go back and edit some CSS. So, I cd into the directory from my laptop and deploy on localhost:5000. I open VS Code and make changes however none of the changes are reflected in the browser # localhost:5000.
When I was building the app, the way I had it set up allowed me to view each change immediately in the browser when I save the file.
Are files editable after you run npm build? What am I missing here?
When you run a build on a react app (or any other app) code will be converted from es6 to es5 and then probably minified (depends on webpack config) so code is unreachable and you need .map files to debug code in production environment.
So the most clean way to act on deployed code is to make a new build with updated features and deploy again the frontend.
In local development react boilerplates usually make intensive use of hot-reload, a plugin that allow code to be hot replaced while app is running.
Built application instead load chunks of JS files once and CACHE it. So in order to see your changes you have to clean cache or force a refresh (home+F5 on windows, CMD+R on OSX) to be sure that your changes are visible.
Despite this I discourage to edit the build files. When you have to update the code stay on development mode, before deploy, build your code and test it live.
You could create some files outside the src folder and access them with fecth from app.js or even import them from index.html ... so if you wanted to change something you could do it without having to do a build again.
I am wondering if it is possible to deploy react.js web app that I've built to a share hosting site that does not have node.js installed?
I use webpack to build the application and it creates normal html, js, css file. I uploaded the static folder that includes all those html, js(bundle.js) and css files, but when I request the site, the server reply with 404 bundle.js not found response.
Use npm run build, you should get a folder with the index html file inside that will run your app. Try this with xampp first before you actually deploy to your server.
Here is everything step by step
npm run build
or
yarn run build
it will generate a build folder that looks like this:
Copy everything and move it to the htdocs in xampp or ftp upload the directory to the public_html file in your hosting
Yes you sure can put react on a shared hosting provider.
Seeing as you're getting a 404 error (not found), you are probably referencing your react file/bundle incorrectly. It might not even be named bundle.js if you're using a boilerplate to create your application.
Can you give more information? What does your index.html file look like? What does your directory structure look like? If you are able to post these files I can tell you what the issue is.
Update:
The answer below should be accepted. (Although this would assume that you have the ability to make a build which you have not verified or not.)
Make a build using the build command through whatever boilerplate you used. Deploy those files on your shared hosting server. Make sure that index.html is at the root of where your server is expecting the root to be and your app should be live.
For deploying a react app on a shared hosting you need to create a production build. Production build is a pack of all your react code and its dependencies.
in most shared hosting we put our site/app inside a public_html directory so if we hit www.yourdomain.com it serves the code from public_html directory.
so if your react app is ready to go, edit your package.json file add a new key value:
"homepage":"http://yourdomain.com"
then create a build using following command:
npm run build
after running the command you will see a new directory named build in your app root. It will contain js and css for the app and a index.html file. You need to upload all the content inside build directory to public_html directory, and that's all, go to your domain and your app will be working just fine.