Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to use files in public folder in ReactJS ?

  • Difficulty Level : Hard
  • Last Updated : 19 Aug, 2021

The public folder contains static files such as index.html, javascript library files, images, and other assets, etc. which you don’t want to be processed by webpack. Files in this folder are copied and pasted as they are directly into the build folder. Only files inside the `public` folder can be referenced from the HTML.

Creating React Application:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

  • Step 1: Create a React application using the following command:

    npx create-react-app foldername
  • Step 2: After creating your project folder i.e. foldername, move to it using the following command:



    cd foldername

Project Structure: It will look like the following. Now create an assets folder and put any sample image into it, like here we have kept the gfg.png file. Also, we have kept the gfgPublic.png file in the public folder.

Simple react app folder structure

App.js




import Intro from './components/Intro';
import './App.css';
  
function App() {
  return (
    <div className="App">
      <Intro />
    </div>
  );
}
  
export default App;

For the above file structure, in order to display the src/assets/gfg.png in Intro component, it can be simply imported and shown like this: 

import gfgLogo from "../assets/gfg.png";
...
<img src={gfgLogo} />

For showing image inside the public folder, ‘public/gfgPublic.png’. The URL for the src attribute will be process.env.PUBLIC_URL + “/gfgPublic.png”. Here, the PUBLIC_URL will be replaced with the URL of the `public` folder during the build.

<img src={process.env.PUBLIC_URL + "/gfgPublic.png"} />

Intro.js




import gfgLogo from "../assets/gfg.png";
  
const Intro = () => {
  return (
    <div className="App">
  
      Image at src/assets/gfg.png : <br />
      <img src={gfgLogo} />
      <br />
  
      Image at public/gfgPublic.png: <br />
      <img src={process.env.PUBLIC_URL + "/gfgPublic.png"} />
      <br />
  
    </div>
  );
};
  
export default Intro;

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:

For including any js files from the Public folder in the HTML file, add the following line. The %PUBLIC_URL% will be replaced with the URL of the `public` folder during the build.

<script src="%PUBLIC_URL%/customScript.js" ></script>

customScript.js




console.log("Your public/customScript.js is loaded !!");

Output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!