I'm having issues launching a React.js app built with Gulp.
I ran npm install even npm update, but when I go to the browser, I do not see the app, but instead I see a blank screen.
Also, I noticed that gulp build produced a blank index.html file.
<!-- <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Default</title>
<meta name="description" content="">
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="./app.css" rel="stylesheet">
<link href="//fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700" rel="stylesheet">
</head>
<body>
<div class="container">
<div id="registration-form"></div>
</div>
<script src="./app.js"></script>
</body>
</html> -->
Please advise.
Related
I have a nx workspace where I have several react apps. One of them is payment and I want to serve it under mybaseurl.com/payment . The static assets (css, js) are failing to load because they are still pointed at root in the index.html. I cannot seem to change the PUBLIC_URL to "/payment" so that all the static files are served from mybaseurl.com/payment instead of mybaseurl.com.
I have tried putting PUBLIC_URL="mybaseurl.com/payment" in the .env file as well as, PUBLIC_URL="mybaseurl.com/payment" nx build payment --prod but nothing seems to have any result.
How can I change PUBLIC_URL here during build time?
For ref, use of PUBLIC_URL: https://create-react-app.dev/docs/adding-custom-environment-variables/
Example code:
Currently the build is generating the following
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
But I want the build to generate the follwing in the index.html,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Payment</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" href="/payment/styles.eb84118aca9dde73dfd8.css">.
<link rel="stylesheet" href="/payment/main.0e4338761429b4eb16ac.css">
</head>
<body>
<div id="root"></div>
<script src="/payment/runtime.28c323bf8ee123f67bad.esm.js" type="module"> </script>
<script src="/payment/polyfills.dd856a07eb47f9259494.esm.js" type="module"></script>
<script src="/payment/main.705bf19aea16ed7111ba.esm.js" type="module"></script>
</body>
</html>
The easiest way to achieve this is to change the base tag by editing apps/payment/src/index.html:
<base href="/payment/">
The browser will then prepend the path to those assets.
i set the "baseHref" property in the production config in the project.json and then it appeared in the generated index.html
Favicon not showing up when running my React project. However, when I click index.html, the icon appears. When I call npm start, when localhost opens I see my pages without icons. I tried every way and even though I made many changes, I could not reach the result. I will be glad if you help.
The file structure of my project is as follows.
file structure
and index.html file
<!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="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
<title>Trying Project</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Clear the cache in your browser, this should fix the issue.
Your icons should be in public folder. For importing correctly you have to start all your paths with "%PUBLIC_URL%/myIcon.ico" and this "%PUBLIC_URL%" will be resolved into public folder (where your index.html is placed by default).
(inside index.html on public folder)
exemple: <link rel="icon" href="%PUBLIC_URL%/logo.png" />
Just add version parameter for the favicon path to force your browser to refresh the pic
<link rel="icon" href="favicon.ico?v=2" />
Then you can delete it, the icon will remain.
I have made a react app and tried deploying it to git-hub pages. I guess I have messed up with some path specifications.
Here is the file structure :
- public
- css
- image
- js
- index.html
- manifest.json
My html file looks like
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="manifest" href="%PUBLIC_URL%./manifest.json">
<link rel="stylesheet" href="%PUBLIC_URL%./css/default.css">
<link rel="stylesheet" href="%PUBLIC_URL%./css/layout.css">
<link rel="stylesheet" href="%PUBLIC_URL%./css/media-queries.css">
<link rel="stylesheet" href="%PUBLIC_URL%./css/magnific-popup.css">
<title>Piyush</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.10.2.min.js"><\/script>')</script>
<script type="text/javascript" src="js/jquery-migrate-1.2.1.min.js"></script>
<script src="js/jquery.flexslider.js"></script>
<script src="js/waypoints.js"></script>
<script src="js/jquery.fittext.js"></script>
<script src="js/magnific-popup.js"></script>
<script src="js/init.js"></script>
</body>
</html>
Error:
GET https://piyushbhangale.github.io/static/css/main.8a155958.chunk.css net::ERR_ABORTED 404
You need to configure package.json with:
"homepage": "http://yourhomepage.com"
This is my first time using reactjs. I installed react and react-dom using npm.
This is my main.js file:
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<h1> hello world</h1>,document.getElementById("node"));
This is my index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
</head>
<body>
<div id="node"></div>
<script src="main.js"></script>
</body>
</html>
Both files are in the same directory, but react isn't changing the VIEW.
Does anyone have any advice for me on how to proceed?
Try running
create-react-app APP_NAME
Hope this works
I used webpack to bundle all my files.
I have a bundle.js file in a directory with an index.html
When i open it in browser it gives me an error :-
Warning: [react-router] Location "/home/vivek/Desktop/prismo-front/build/index.html" did not match any routes
My file directory looks like this : -
index.html
<!DOCTYPE html>
<html lang="en">
<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">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>Prismo</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root">ds</div>
<script type="text/javascript" src="bundle.js" charset="utf-8">
</script>
</body>
</html>
Run the following to serve your files locally.
Install: npm install -g http-server.
cd into build
run http-server
go to http://localhost:8080/ in browser
OR upload your files to a server and you won't get this problem. You can't use run your index.html file locally as it doesn't play nicely with History which is used for React Router.