I am facing one issue which is when I upload my angular app to my hosting it's not opening sub URLs, for example, https://mywebsite.com it's opening but https://mywebsite.com/pricing it's not opening directly user need to open website first then go to another page.
Index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Mobile App Development Services | Web Development Services | Logo Design Services</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="./assets/img/favicon.png">
<link href="https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
</head>
<body>
<app-root></app-root>
</body>
</html>
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
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.
I'm using Vue-material on my VueJS 2 site and it looks as expected on my laptop. It responds accordingly as I shrink the screen. However, when I emulate a smartphone or open the site on my smartphone it simply looks like a "shrunken" version of the computer layout.
I may be missing something basic here, but I'm not sure what it is.
Site in shrunken down browser window 👍:
Site on smartphone 👎:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
add these two lines in your site's Html because it is missing meta viewport tag.
I hope it would help you.
add this meta to your index.html
<meta name="viewport" content="width=device-width,initial-scale=1.0">
Example index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>win-vue</title>
</head>
<body>
<div id="app"></div>
<script src="/dist/build.js"></script>
</body>
</html>
This is my directory structure:
build/ (contains gulp tasks for generating dist from src)
dist/ (this is the static app I'm serving)
(all other assets, css, images, etc)
index-5c1755df65.html
src/ (source files, can't be served through express)
express/ (express app + API)
app.js
Here's my express app.js:
//Enable Helmet security fixes - dnsPrefetchControl, clickjacking prevention, poweredBy hide, HSTS, ieNoOpen, MIME type sniffing and XSS prevention
app.use(helmet());
//Parse the body of the request as a JSON object, part of the middleware stack (https://www.npmjs.com/package/body-parser#bodyparserjsonoptions)
app.use(bodyParser.json());
//Serve static Angular JS assets from distribution, part of the middleware stack, but only through HTTPS
//--------The following line used to work!---------
app.use('/', ensureSecure, express.static('dist');
//Import routes (Removed getToken router. BH Token is processed through a helper)
app.use('/api', [router_invokeBhApi]);
//404 Redirect on unhandled url
app.use('*', function (req, res, next) {
res.status(404).sendFile(__dirname + '/views/404.html');
});
//Setup port for access
app.listen(process.env.PORT || 3000, function () {
console.log(`The server is running on port ${process.env.PORT || 3000}!`);
});
I used to serve the entire dist (which is an angular 1.4.3 app) with that line in the code above and it used to serve the index file, even though it had a random cipher in the name.
After some updates, it just stopped working. Now I have to do this, using an external library called serve-static from npm:
app.use('/', ensureSecure, serveStatic('dist', {'index': ['index-5c1755df65.html', 'index.html']}));
Not sure how to fix this, or what caused this sudden change. Is it the browser? or angular? (upgraded from 1.4.3 to 1.5.8 with my latest changes)
EDIT: My html file
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--REMOVED ALL THE META TAGS FOR STACK OF PURPOSES-->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>IMG Career Portal</title>
<!-- default font -->
<!--<link href='//fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>-->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/vendor-f398fee98b.css">
<link rel="stylesheet" href="styles/app-292a67e7f9.css">
</head>
<body>
<!-- Main Application Tag (Angular2 Ready :)) -->
<main></main>
<script src="scripts/vendor-ec12e9202e.js"></script>
<script src="scripts/app-8e0fb1a5c9.js"></script>
</body>
</html>
I run gulp express to clean, build and run the app:
gulp.task('express', ['clean','build'], function(){
nodemon({
script: 'express/app.js'
});
});
It's because app.js need work inside head tag.
If you want your index.html file inicializate with focused API:
app.get('/', function(req, res){
res.render("../yourpaste/index"); //the new index.ejs file
});
Add in your app.js
module.exports = app;
Try put your app.js inside head tag.
<!doctype html>
<html lang="en">
<head>
<script src="scripts/app-8e0fb1a5c9.js"></script> //your app.js
<meta charset="utf-8">
<meta name="description" content="Official career portal of the Ian Martin Group, an Engineering & IT recruiting B Corporation.">
<meta property="og:title" content="Ian Martin Group: Careers">
<meta property="og:description" content="Find the next great step in your Engineering or IT career here.">
<meta property="og:image" content="https://media.glassdoor.com/o/de/b1/5f/51/the-ian-martin-group-all-company-retreat-2015.jpg">
<meta property="og:url" content="https://careers.ianmartin.com">
<meta name="twitter:title" content="Ian Martin Group: Careers">
<meta name="twitter:description" content="Find the next great step in your Engineering or IT career here.">
<meta name="twitter:image" content="https://media.glassdoor.com/o/de/b1/5f/51/the-ian-martin-group-all-company-retreat-2015.jpg">
<meta name="twitter:card" content="summary_large_image">
<meta property="og:site_name" content="IMG Careers">
<meta name="twitter:image:alt" content="Great company culture.">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>IMG Career Portal</title>
<!-- default font -->
<!--<link href='//fonts.googleapis.com/css?family=Roboto:400,700,500' rel='stylesheet' type='text/css'>-->
<link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<!-- Font Awesome -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/vendor-f398fee98b.css">
<link rel="stylesheet" href="styles/app-292a67e7f9.css">
</head>
<body>
<!-- Main Application Tag (Angular2 Ready :)) -->
<main></main>
<script src="scripts/vendor-ec12e9202e.js"></script>
</body>
</html>
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.