Add prefix to src and css of index.html in react

Question

I am having a react app. At the time of build generation, in my build folder I am getting below code:

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta name="description" content="Web site created using create-react-app" />
    <link rel="apple-touch-icon" href="/logo192.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>React App</title>
    <script defer="defer" src="/static/js/main.8d8de8a8.js"></script>
    <link href="/static/css/main.073c9b0a.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>

</html>

Now, Instead of the URLs starting with /static I want them to add a prefix automatically when build is generated such as /test/static in src as well as href tag. Please help. Thanks in advance.

Try running npm run eject, this will generate webpack config files there you will find that parameter and you can change it. — Usiel
– Usiel, Commented Apr 14, 2022 at 17:10

Usiel · Accepted Answer · 2022-04-14 17:30:40Z

1

To configure the react build, do the following:

run: npm run eject or yarn eject

The repository has to be at the latest commit, otherwise the command will not generate the configuration files. The command will generate configuration files for create-react-app.

Once you see that the files are generated, look for the following file:

 config/webpack.config.js

With your text editor look for something like static/ you will see that it is the path configured for the static files. You can replace it with a route of your choice.

Warning: A configuration error in this file may cause your project not to compile or the development server not to start.

answered Apr 14, 2022 at 17:30

Usiel

7295 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Akshay Seth Over a year ago

This is doing the job but when deployed on a nginx server and hitting URL it is still hitting IP/static/* and what I want is IP/test/static. Do you have any idea on how to fix this?

Collectives™ on Stack Overflow

Add prefix to src and css of index.html in react

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related