Vite (react) project after building, dist folder/assets don't have any image - reactjs

I create a react project by using vite. When i run command npm run build to build my project then dist folder is create but my images are neither showing in dist/assets nor in deploy page on github.
My previous projects build without any problen dist/assets/ folder.I have already added base in vite.config.js.
I think that my images are not including when i build my project.I want to build my project with images.Sorry, for bad english.

I were putting image source like this: 'src/images/image.png'.thats was reason why build command not adding image to dist folder. Correct way to give image source like this : './images/image.png'.You can also give image src by import images.

Related

How to make an apk file downloadable from a react js website

I am having an apk file stored in a folder of my react js project src/asset/myapp.apk, I want to make it downloadable from my portfolio website. How can I achieve that?
Try putting your static files in public/ folder.
Then simply retrieve it by addressing "/path/to/file.apk"
When using src/ filename will be processed and changed relative to your webpack config which can vary each time you run a build which is not a good practice.
If you're using create-react-app read this documentation:
Using the Public Folder
Note: if you are using gatsby, please use static/ folder instead of public.

Adding a homepage field to package.json in react app not translating to build

I'm trying to launch a React app (create-react-app) to GoDaddy using cPanel and I am having issues creating the correct build. I am setting the homepage in package.json underneath "name" and "version" (not sure if order matters here) like this:
"homepage": "http://mydomainname.org"
However, when I run npm run build, I get a message saying "The project was built assuming it is hosted at /. You can control this with the homepage field in your package.json.
Has anyone encountered this problem before?
That message is not an error. After you run the npm run build command a folder named build should appear and it contains your react app. You need to upload the contents of that folder to the public_html folder in cpanel's file manager. (Make sure you are uploading what is inside the build folder and not the build folder itself). Here is a link to a short tutorial

Create-React-App build folder missing files

I have run create-react-app and started development on my app. yarn start works perfectly and the app runs in browser with several components and imported images. However, when I run yarn build not all of the images are moved to build/static/media (please see image below).
Folder structure and terminal output
There are no errors in the terminal output other than a warning about an arrow function which I have since removed with no success.
Is it still building an old version from when I only had panorama.jpg? Please advise.
You need to put your images to /public folder.

How upload reactjs project to ftp?

I'm newbie on react, I did 2 paged website for exercise, all is working well on my localhost.
But i'm confused about how upload project to my linux server.
What i did ?
I create react app via terminal with this command :
create-react-app react-demo-project
Terminal create my project and in project root i have node_modules directory.
so here is i have some questions:
1- React project will work normally on linux hosting?
2- I need to all my project upload to ftp? Because there is arround 20.000 file in node_modules directory.
With this command build your app :
npm run build
Build folder has created in your project directory, open index.html in your browser and check output...
If you saw a blank page (after build and opening index.html) , you must change the main js file path in the index.html :
default is : src="/static/js/main.ddfa624a.js"
change to : src="./static/js/main.ddfa624a.js"
I changed js path and this worked !
create-react-app has a command to bundle your app to a ready to deploy state.
npm run build
This command will bundle your app in /build folder. With the contents of this folder you can deploy your app in any hosting environment. You don't need to install your packages and libraries manually when you use this command. More information about using this command and deploying your app in different hosting environments can be found create-react-app README
Deployment
npm run build creates a build directory with a production build of
your app. Set up your favorite HTTP server so that a visitor to your
site is served index.html, and requests to static paths like
/static/js/main.<hash>.js are served with the contents of the
/static/js/main.<hash>.js file.
1- React project will work normally on linux hosting?
Yes, it will work in all webservers, unless you have server side rendering (SSR)
2- I need to all my project upload to ftp? Because there is arround
20.000 file in node_modules directory.
Files in node_modules will NOT go to your web server. These are development dependency files used only during development.
Run npm run build
This will create a folder called build in project root. This will have all html, css , images and js files
Copy all files and folders in build folder to your site root.
If your site has to be hosted in a sub folder in root you need to do the below, otherwise you will see a blank page. This is because your static files (css, js etc) are not loaded correctly.
Open package.json
Add a new entry homepage: /your_subfolder/
It will look like this
Now do steps mentioned above and your site should work fine
Add this line to package.json:
"homepage": "./"
That should make it work without the need to adjust index.html after every build.

Sencha Touch: SASS correct image path

I have problems with adding (background-) images via SASS. If I open my app on the sencha web server the images that are referenced in CSS (or SASS) can be found and are visible. But in the production build of my app the same images can't be found. It's because after the build, the images are being moved into a different location in the resources/ folder.
So I want to ask, what is the correct way in SASS for referencing images? How can I fix my problem?
The debug version:
images are in folder ./resources/images
in ./resources/sass/app.scss there is a line with "background-image: url('../images/pic.png')"
The build version:
images are now in folder ./resources/resources/images
the references in the CSS/SASS are now invalid!

Resources