React app which works great in local and aws. But in Google App Engine, when deployed using
mvn appengine:deploy
opens white fresh website which contains the index.html content inside; in the page source like:
<!doctype html>
<html class="no-js" lang="en" dir="ltr">
<head>
<base href="/" />
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="google" value="notranslate">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="shortcut icon" href="favicon.ico" />
<link rel="manifest" href="manifest.webapp" />
<link rel="stylesheet" href="static/css/loading.css">
</head>
<body>
<div id="root"/>
</body>
</html>
And does not load the js bundle. I couldnt see any clue in the browser and server logs.
I imagine that you want to host the React.js front-end and Java back end project that is build by maven. But It’s difficult to merge a React.js project built with NPM and a Java back-end project built with Maven into one deploy-able package in Google Cloud Patform.
So As an altenative, you can use Google microservices within an App engine project. You can follow this tutorial to solve your issue.
If you have only a Reactjs project so here is a tutorial, how to deploy React App to Google Cloud App Engine.
Related
im trying to change the title of my website in google search but i can't seem to find how to do it. I saw something about react-helmet i couldn't figure out how to use it in my files. Im trying to change the title and description of my website and also pages. I made website in react.js and i host it on apache2.
Change the title and description in the index.html file of our React App and then rebuild the app.
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/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**"
/>
<title>React App</title>
Hope this helps. Let me know if this works for you.
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.
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.
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>
I have built my components and imported them into the Laravel framework. I have set react as preset and the App loads. The Sass files are in each folder that has a component eg.
\ComponentX
--ComponentX.js
--ComponentX.module.scss
The files load fine but there is no css being added.
I have done npm install sass-node - that is all so far.
I tried to place sass file in the 'sass' folder that is given to us when Laravel is installed but nothing happens, Is there further configuration required?
WEBPACKMIX
const mix = require('laravel-mix');
mix.react('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.browserSync('localhost:8000');
I am importing the sass into my components
import styles from './App.module.scss';
I have one view 'home.blade.php', which I point the script to the js resource and have an id for App.js to pin to.
<!doctype html>
<html lang="{{ app()->getLocale() }}">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<link href="{{asset('js/sass/app.scss')}}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="root"></div>
<script src="{{asset('js/app.js')}}" ></script>
</body>
</html>
Thank you in advance
I have an interesting problem with the Cordova InAppBrowser plugin on ios where it will only start working after I leave the app. For example, when I hit a button in the app that should load the InAppBrowser, nothing happens. I can wait 5 or 10 minutes and nothing will happen. If I double tap home and bring up the recent apps view, the InAppBrowser loads immediately. If I hit home then return to the app, it loads right away. After it loads the first time, it works immediately every subsequent time without having to leave the app.
I've confirmed this is what is happening with breakpoints on the init of the InAppBrowser view and view controller in xcode. They only get called after leaving the app.
The app is a Sencha-Touch app on the latest framework and the xcode project and plugins were generated/installed using the latest version of Cordova and from the command line. The only file i've modified in the project from that generated by Cordova (aside from my apps files in www) is the index.html:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, target-densitydpi=device-dpi" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>MyWebApp</title>
<script>
var Ext = Ext || {};
Ext.theme = {
name: "Default"
};
</script>
<script src="sencha-touch-all.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<link rel="stylesheet" href="resources/css/application.css">
<script src="resources/js/currencyFormatter.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
</body>
</html>