We have three environments Dev, Staging and Prod. Create-react-app build is quite suitable for all the three environments but the only things change during the build is the environment variable for API endpoint.
We are using the Jenkins pipeline for the build process and putting the output in S3 Bucket, the only problem with that process is that we have to make a separate build for every environment although everything is same except that API environment variable. It takes a significant amount of time.
So I possible solution is to move from compiled environment variable to runtime environment. I came across this. But I don't know how to do it in practical being newbie to Jenkins and AWS
Our folder structure looks like this
Project
|---mocks
|---static
|---index.html
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. 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>
<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>
So, I am writing the way we have fixed this. In Jenkinfile file which is placed inside our project repo. We have made following changes for every environment.
Before every stage we simply re-writing the env.js with respective file.
stage('Push to Dev') {
...
steps {
.....
sh 'cp ./config/dev.js ./build/env.js'
.....
}
}
Related
Hi I am new to React and recently built my app which was working fine locally but when my colleagues deployed it on the azure , we are facing this issue.
I tried looking for answers in stackoverflow itself but it was associated with changing webpack.config.js file which looks nothing like my config file which is in node_modules/react-scripts/config. So no idea how to solve it. Here is my public/index.html file
<!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="Web site created using create-react-app"
/>
<title>Booking System</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>
I have removed the default React icon from the index.html file in create-react-app, but, it is still showing up.
Here is the code of index.html file
<!DOCTYPE html>
<html lang="en" class="h-full bg-gray-50">
<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="Web site created using create-react-app"
/>
<title>ResumeBuilder</title>
</head>
<body class="h-full">
<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>
Folder structure of public of create-react-app:
How can I remove it?
A simple shortcut could help:
Ctrl+F5 will do a force cache purge for your page.
You should replace reactjs Icon with your website logo Icon
you can easily generate online a favicon there are many websites available like this - https://www.favicon-generator.org/
Open the above site select your site logo and generate a favicon then download the zip file and extract the zip file and copy the logo icon from the generated folder and replace it with react js default icon.
I create a react-app using npx create-react-app and published the app to GitHub using vscode. My repository contains a public folder inside of the main repository that has my index.html file.
Here is my repository on GitHub
I then run the following command in my vscode terminal:
git subtree push --prefix public origin gh-pages
According to this tutorial on how to publish to github with a dist folder I did everything correctly.
When I check my repository it has 2 branches, main and gh-pages however if I go to my deployed site I get a completely blank site. What am I missing here?
The page isn't completely blank, if you visit https://atanasovcode.github.io/product-preview-card/ and view the source, you see the contents of your index.html file:
<!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`.
-->
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#500;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght#9..144,700&display=swap" rel="stylesheet">
<title>Product Preview Cardp</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>
There are some comments in there that seem relevant:
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 tag.
To begin the development, run npm start or yarn start.
To create a production bundle, use npm run build or yarn build.
WebStorm with create-react-app has, in the /public/index.html file, a folder path to /public tagged as %PUBLIC_URL%.
It can't find the directory %PUBLIC_URL% as it doesn't exist, nor should this exist.
Other than suppressing the error with <!--suppress HtmlUnknownTarget -->, is there a way in Webstorm to alias a directory variable like, %PUBLIC_URL%, to the root path of /public for no editor errors in development?
<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">
<!--
manifest.json provides metadata used when your web app is added to the
homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-->
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!--
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>
This article seems to give some more insght on this:
https://medium.com/#jenniferdobak/the-public-folder-and-favicons-in-create-react-app-8dc2cc1d492b
This is a good time to address that funky looking %PULIC_URL% tag. Remember the ‘escape hatch’ React provides in case we put assets in the public folder? During the build, assets prefixed with the %PULIC_URL% tag will be recognized and complied. However this is NOT best practice and should be used only when necessary.
Thus, in most cases, you can replace %PUBLIC_URL% with something like public, but of course, it depends on how you have structured your React project.
I'm trying to build my react app using react's build tool. When I try to "npm start", the app works fine.
npm start
On http://localhost:3000 => I can access the application.
But when I build the application and try to access "index.html" file on the build folder, it doesn't work and I encounter with a white blank screen.
npm run build
http://myreact-app/build/index.html => White blank screen.
This is the build folder which has been created after run npm run build.
And this is the 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">
<link rel="manifest" href="/manifest.json">
<link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<link href="/static/css/main.9a0fe4f1.css" rel="stylesheet">
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="/static/js/main.46d8cd76.js"></script>
</body>
</html>
Am I doing something wrong? Can't I access the built index.html file on my apache web server?
Probably you've not noticed yet but I don't think your html file is able to import css and script files correctly. When I look at your file structure, I see the everything about build is under the build folder. But in your html file, there are slashes ("/") before the file paths. That's why browser is looking for those files under the parent of the "build". Try to remove slashes.
<!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="/manifest.json"><link rel="shortcut icon" href="/favicon.ico">
<title>React App</title>
<style></style>
<link href="static/css/main.65027555.css" rel="stylesheet">
</head>
<body
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script type="text/javascript" src="static/js/main.316f1156.js"></script>
</body>
</html>
The above problem can be overcome if you add
"homepage":".",
in your package.json. This is not official but a good hack to follow.
https://github.com/facebookincubator/create-react-app/issues/1487
To fix this problem go to your build folder then you will see manifest.json file, open it and you will see your manifest.json have:
"start_url": ".",
change it to
"start_url": "/",
there is alternative way to fix the problem:
before your react project build go to your package.json file and specify homepage property with . value or maybe with your site base url, see example:
{
....
"homepage": ".",
......
}
you should try use the serve package here to run single page app.
npm install -g serve to install globally
serve help to see help texts
serve --single build to serve single page app. I server will be started from which you can access your react app
If nothing of above works. Maybe the problem is that you are using react-router-dom and the routes needs a special compilation generating individual htmls for each page that exists in your router config.
Ref:
I'm using create-react-app and I need to open build/index.html in browser directly without a server
In summary you need to use <HashRouter> instead <Router> and a <Switch> wrapper to your routes. For example:
<Switch>
<Route exact path='/' component={WelcomePage} />
<Route exact path='/game' component={GamePage} />
</Switch>
Consider that your routes will change to:
http://localhost:3000/#/ -> Root page
http://localhost:3000/#/game -> Other page
You need to install local server plugin/extenstion.
If you are vscode user then search live server extension and install it. Then there will be "Go live" option in bottom of your editor.
For other editor user (atom/sublime) search for live server plugins.
Sometimes the reason that the content is not served is because the command of "serve -s" was executed from outside of the build directory. The correct way is to go into the build directory then execute "serve -s" from therein.
I had an index.php in the webroot which prevented my app from running index.html.
I use HashRouter instead BrowserRouter & also need to add /# infront of every url like this:
href={`/#/blogs/${slug}`}
this works for me , thanks
Try using <HashRouter> instead of <Router>, and don't forget to import {HashRouter}.