CODEWITHSUNDEEP
reactjsintellij-ideawebstormcreate-react-app
Harry Scheuerle
Harry Scheuerle

Reputation: 446

%PUBLIC_URL% editor warning on WebStorm

WebStorm with create-react-app has, in the /public/index.html file, a folder path to /public tagged as %PUBLIC_URL%.

It can't find the directory %PUBLIC_URL% as it doesn't exist, nor should this exist.

Other than suppressing the error with <!--suppress HtmlUnknownTarget -->, is there a way in Webstorm to alias a directory variable like, %PUBLIC_URL%, to the root path of /public for no editor errors in development?

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
</head>

Upvotes: 12

Views: 2008

Answers (1)

beebus
beebus

Reputation: 94

This article seems to give some more insght on this:
https://medium.com/@jenniferdobak/the-public-folder-and-favicons-in-create-react-app-8dc2cc1d492b

This is a good time to address that funky looking %PULIC_URL% tag. Remember the ‘escape hatch’ React provides in case we put assets in the public folder? During the build, assets prefixed with the %PULIC_URL% tag will be recognized and complied. However this is NOT best practice and should be used only when necessary.

Thus, in most cases, you can replace %PUBLIC_URL% with something like public, but of course, it depends on how you have structured your React project.

Upvotes: 1

Related Questions