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
Related
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.
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.
New to react js and firebase
I have a firebase project, I did the init and deploy, but the index.html was a generic file.
I copied the index.html from the public directory in the build directory (which is the folder specified in hosting firebase.json)
when I start the app the page is empty.
<!DOCTYPE html>
<html lang="en">
<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"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<!--
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>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
that "root" bit might be the problem.
this is the index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
when I access the link it's just an empty page
I am trying to create a React application/Chrome extension which overrides the content of a new tab in Google Chrome. I have used create-react-app and am simply trying to override the content of a new tab with App.js content. The folder structure is straight from the initial create-react-app, which is below.
build
node_modules
Public
favicon.ico
index.html
logo192.png
logo512.png
manifest.json
src
App.css
App.js
app.test.js
index.css
index.js
logo.svg
..
..
My manifest.json file looks like this.
{
"name": "..",
"author": "..",
"version": "1.0.1",
"manifest_version": 2,
"description": "..",
"chrome_url_overrides": {
"newtab": "index.html"
}
}
This is what my index.html looks like.
<!DOCTYPE html>
<html lang="en">
<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"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<!--
This HTML file is a template.
If you open it directly in the browser, you will see an empty page.
You can add webfonts, meta tags, or analytics to this file.
The build step will place the bundled scripts into the <body> tag.
To begin the development, run `npm start` or `yarn start`.
To create a production bundle, use `npm run build` or `yarn build`.
-->
</body>
</html>
My index.js file looks like this.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
serviceWorker.unregister();
I have tried inserting the following but receive an empty page.
<script src="../src/index.js"></script>
How would I override the content of a new tab with App.js?
In case some have missed this step, you also need to build the app and load the build file into chrome extensions.
After changing manifest.json in the public folder and adding a .env file in the root directory as described by Corbuk, run npm build. Next, drag the build file into chrome://extensions/ or import it with the Load unpacked button
Originally I modified my manifest.json file to the following.
{
"name": "..",
"author": "..",
"version": "1.0.1",
"manifest_version": 2,
"description": "..",
"chrome_url_overrides": {
"newtab": "index.html"
},
"content_security_policy": "script-src 'self' 'YOUR HASH'; object-src 'self'"
}
The YOUR HASH can be found from the console, as highlighted below
However, I went for an alternative approach. I created a .env file in the root directory and placed the following inside of it
INLINE_RUNTIME_CHUNK=false
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).