I followed instruction from How to deploy Flutter WebApp using Google AppEngine that consists of mainly.
gcloud app create
Creating basic app from any tool, I chose Android studio and used following values
creating app.yaml with following
runtime: python39
api_version: 1
threadsafe: true
handlers:
url: /
static_files: web/index.html
upload: web/index.html
url: /(.)
static_files: web/\1
upload: web/(.)
then executing flutter build web
this complained about api_version and threadsafe so i removed both from the app.yaml file , leaving file like
runtime: python39
handlers:
url: /
static_files: web/index.html
upload: web/index.html
url: /(.)
static_files: web/\1
upload: web/(.)
then flutter build web works and shows following output
File upload done. Updating service [default]...done. Setting traffic
split for service [default]...done. Deployed service [default] to
[https://myxyzxyz.uc.r.appspot.com]
You can stream logs from the command line by running: $ gcloud app
logs tail -s default
Below is the location of the index.html and flutter.js
C:\projectsxyzprj>dir /s index.html flutter.js Directory of
C:\projectsxyzprj\build\web
01/29/2023 02:24 AM 1,862 index.html
Directory of C:\projectsxyzprj\build\web
01/29/2023 02:24 AM 6,458 flutter.js
2 File(s) 8,320 bytes
Directory of C:\projectsxyzprj\web
01/29/2023 01:54 AM 1,872 index.html
1 File(s) 1,872 bytes
Total Files Listed:
3 File(s) 10,192 bytes
below is the content of index.html ( auto generated by android studio)
<html>
<head>
<base href="$FLUTTER_BASE_HREF">
<meta charset="UTF-8">
<meta content="IE=Edge" http-equiv="X-UA-Compatible">
<meta name="description" content="A new Flutter project.">
<!-- iOS meta tags & icons -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="riya2">
<link rel="apple-touch-icon" href="icons/Icon-192.png">
<!-- Favicon -->
<link rel="icon" type="image/png" href="favicon.png"/>
<title>riya2</title>
<link rel="manifest" href="manifest.json">
<script>
// The value below is injected by flutter build, do not touch.
var serviceWorkerVersion = null;
</script>
<!-- This script adds the flutter initialization JS code -->
<script src="flutter.js" defer></script>
</head>
<body>
<script>
window.addEventListener('load', function(ev) {
// Download main.dart.js
_flutter.loader.loadEntrypoint({
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
}
}).then(function(engineInitializer) {
return engineInitializer.initializeEngine();
}).then(function(appRunner) {
return appRunner.runApp();
});
});
</script>
</body>
</html>
When I go to https://myxyzxyz.uc.r.appspot.com in browser, the browser window shows the App title correctly but the simple counter app does not appear, in browser dev tools under network tab I see 404 for flutter.js as show below, in chrome as well as firefox.
Related
I'm trying to deploy a React Web App on a Debian VM using nginx.
My root points to the build folder in my git repo (/home/myuser/Projects/mysite/build). This way I can update my app by git pull whenever I make a change.
I have created a conf file in /etc/nginx/conf.d/react.conf, and it looks like:
server {
listen 80;
root /home/myuser/Projects/mysite/build;
index index.html index.htm;
access_log /var/log/nginx/siteoneway.access.log;
error_log /var/log/nginx/siteoneway.error.log;
location / {
try_files $uri $uri/ =404;
}
}
In /etc/nginx/nginx.conf, I comment this line (include /etc/nginx/sites-enabled/*):
##
# Virtual Host Configs
##
include /etc/nginx/conf.d/*.conf;
# include /etc/nginx/sites-enabled/*;
}
So, when I access http://mypublicIP, the browser just shows a blank white screen. If I press F12, I see content of index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="theme-color" content="#000000"/>
<meta name="description" content="My Site Name"/>
<title>My Site Name</title>
<link rel="icon" href="/favicon/favicon-32x32.png"/>
<link rel="apple-touch-icon" href="/favicon/android-chrome-192x192.png"/>
<link rel="manifest" href="/manifest.json"/>
<script defer="defer" src="/static/js/main.cd92e2ed.js"></script>
<link href="/static/css/main.5b13449a.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
, but the site is not opening.
After a few hours, I found the error. There was an error setting on package.json, the "homepage" property was filled with an incorrect value.
I have created a simple static website with React. I'm using the library react-bootstrap that references certain script and css files with absolute paths inside the index.html when I run npm build.
This leads to issues when deploying the build on GitHub pages, because the root page is https://xyz.github.io/repo-name/ and not https://xyz.github.io/.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="description" content="xyz" />
<link rel="icon" href=".//favicon-96x96.ico" />
<link rel="apple-touch-icon" href=".//apple-touch-icon-180x180.png" />
<link rel="manifest" href=".//manifest.json" />
<title>xyz</title>
<script defer="defer" src="/static/js/main.ce5d72e5.js"></script>
<link href="/static/css/main.e7720ab7.css" rel="stylesheet" />
</head>
...
I'm auto-deploying the webapp with GitHub Actions. When there is a push to the main branch, a workflow will trigger, the app gets built and then pushed to branch prod, which is then set up as GitHub Page.
So far I've tried to add another GitHub Action that searches and replaces certain strings in my files such as https://github.com/marketplace/actions/find-and-replace without success.
What would be the best way to fix this?
Edit: My YAML file
# .github/workflows/publish.yml
name: Deploy on GitHub
on:
push:
branches:
- main
jobs:
build:
runs-on: ubuntu-latest
name: Build and Push
steps:
- name: git-checkout
uses: actions/checkout#v2
- name: Install all dependencies
run: npm install
- name: Build
run: npm run build
- name: Find and Replace JS
uses: jacobtomlinson/gha-find-replace#v2
with:
find: 'src="static/js'
replace: 'src="./static/js'
include: "./build/index.html"
- name: Find and Replace CSS
uses: jacobtomlinson/gha-find-replace#v2
with:
find: 'href="static/css'
replace: 'href="./static/css'
include: "./build/index.html"
- name: Push
uses: s0/git-publish-subdir-action#develop
env:
REPO: self
BRANCH: prod # The branch name where you want to push the assets
FOLDER: build # The directory where your assets are generated
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} # GitHub will automatically add this - you don't need to bother getting a token
MESSAGE: "Build: ({sha}) {msg}" # The commit message
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.
I have successfully installed and run the React + Redux starter template that is provided with .Net Core 2.1 (I'm talking about the project created withdotnet new reactredux).
Now I would like to change my entry point from index.html to my own controller inside the Asp.Net.Core project.
Since the create-react-app is configured to use index.html as an entry point, I've had to:
Delete the index.html file
"Eject" the dependencies (npm run eject) in order to modify the configuration file for webpack (I removed the InterpolateHtmlPlugin and HtmlWebpackPlugin plugins from webpack config, as well as all references to index.html in build.js and start.js
Add a HomeController.cs to the project:
namespace ReactReduxSpa.Controllers
{
public class HomeController : Controller
{
public IActionResult Index()
{
return View();
}
}
}
Add the corresponding Index.cshtml file to my project with pretty much the same content as the former index.html file, except that I now manual insert the generated script bundle:
<!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">
<base href="~/" />
<link rel="manifest" href="~/manifest.json">
<link rel="shortcut icon" href="~/favicon.ico">
</head>
<body>
<div id="root"></div>
<script src="~/static/js/bundle.js" asp-append-version="true"></script>
</body>
</html>
In Startup.cs I changed app.UseMvc(…) to:
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller}/{action=Index}/{id?}");
routes.MapSpaFallbackRoute(
name: "spa-fallback",
defaults: new { controller = "Home", action = "Index" });
});
My home controller is now executed when accessing the site and the site itself works as intended. However, I'm getting thousands of errors in the console for these requests:
Looking at the response, I see that the server simply served the content of my Index.cshtml view instead of letting these requests through. I assume these are used for development to sync the site and the sources.
To sum it up: I don't think that I'm doing it the right way, but I don't know how to do it differently. My goal is simply to replace the static index.htm with some dynamic content (some bits need to be generated on server side).
I'm trying to set up a Nginx web server for serving a SPA based on AngularJS with single entry point at index.html file.
Here is my configuration:
server {
server_name aislc.dev;
root /var/www/aislc/dist;
# API backend
location ~ ^/api/(.*)$ {
fastcgi_pass unix:/var/run/php5-fpm.sock;
include /etc/nginx/fastcgi_params;
fastcgi_param SCRIPT_FILENAME /var/www/aislc-api/index.php;
}
location / {
try_files $uri /index.html;
}
types {
text/cache-manifest appcache;
application/json js.map;
}
}
When I try to open the site, the browser downloads a file with an unknown name and extension in which the contents of the `index.html
Contents of index.html:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Test</title>
<link href="app.css" rel="stylesheet"/>
</head>
<body>
<p>Loading...</p>
<script src="app.js" type="text/javascript" async></script>
</body>
</html>
Chrome screenshot
Firefox screenshot
Where am I wrong?
I found the solution!
I deleted the types section, because it is directive replacing built-in mime types of nginx rather than extending them. Use include method:
include mime.types;
types {
text/cache-manifest appcache;
application/json map;
}