I am trying to use firebase to host my React App, but for some reason it is not rendering my app.js file.
I initially ran firebase init hosting, which ended up overwriting my index.html file.
I then ran firebase deploy --only hosting which published to my hosting URL.
However the content available at the hosting URL only contains info from my index.html file, and not from App.js. (Note that my public folder contains index.html, but App.js is not in the public folder).
The result is that when I run npm run start, the local web server shows all the content from App.js, but when I deploy, I see only the content from index.html. Below is my code, and suggestions would be appreciated:
Firebase.json:
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Public/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 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>Michael McKinney</title>
<!-- update the version number as needed -->
<script defer src="/__/firebase/8.3.2/firebase-app.js"></script>
<!-- include only the Firebase features as you need -->
<script defer src="/__/firebase/8.3.2/firebase-auth.js"></script>
<script defer src="/__/firebase/8.3.2/firebase-database.js"></script>
<script defer src="/__/firebase/8.3.2/firebase-firestore.js"></script>
<script defer src="/__/firebase/8.3.2/firebase-functions.js"></script>
<script defer src="/__/firebase/8.3.2/firebase-messaging.js"></script>
<script defer src="/__/firebase/8.3.2/firebase-storage.js"></script>
<script defer src="/__/firebase/8.3.2/firebase-analytics.js"></script>
<script defer src="/__/firebase/8.3.2/firebase-remote-config.js"></script>
<script defer src="/__/firebase/8.3.2/firebase-performance.js"></script>
<!--
initialize the SDK after all desired features are loaded, set useEmulator to false
to avoid connecting the SDK to running emulators.
-->
<script defer src="/__/firebase/init.js"></script>
</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>
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css'
import App from './components/App';
import firebase from "firebase/app";
import * as serviceWorker from './serviceWorker';
// For Firebase JS SDK v7.20.0 and later, measurementId is optional
firebase.initializeApp = {
apiKey: "Fake",
authDomain: "michaelmckinney-Fake.firebaseapp.com",
projectId: "michaelmckinney-Fake",
storageBucket: "michaelmckinney-Fake.appspot.com",
messagingSenderId: "fake",
appId: "Fake:web:Fake",
measurementId: "Fake"
};
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();
Components/App.js:
import { Tabs, Tab } from 'react-bootstrap'
import React, { Component } from 'react';
import firebase from "firebase";
import './App.css';
t
class App extends Component {
constructor(props) {
super(props)
}
render() {
return (
<div className='text-monospace'>
<nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
<a
className="navbar-brand col-sm-3 col-md-2 mr-0"
target="_blank"
rel="noopener noreferrer"
>
<img src={dbank} className="App-logo" alt="logo" height="32"/>
<b>dBank</b>
</a>
</nav>
<div className="container-fluid mt-5 text-center">
<br></br>
<h1>{"Welcome from App.js"}</h1>
<br></br>
<div className="row">
<main role="main" className="col-lg-12 d-flex text-center">
<div className="content mr-auto ml-auto">
<Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
{/*add Tab deposit*/}
{/*add Tab withdraw*/}
</Tabs>
</div>
</main>
</div>
</div>
</div>
);
}
}
export default App;
I believe the issue was that I was not building correctly. After changing firebase.json to
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
and running npm build, I deployed as expected.
Related
Here is my flask project, which im trying to get a react file to work in.
In it, we have app.py, which contains the routes, and should be hitting index.html in the templates folder.
app = Flask(__name__)
#app.route("/stem")
# test channel
def qi():
return render_template('index.html')
in the html, im simple running the script for App.js,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="{{ url_for('static',filename='styles/App.css') }}">
<script src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.26.0/babel.js"></script>
<title>nstem</title>
</head>
<body>
<script src="{{ url_for('static', filename='js/App.js') }}"> </script>
<div id="root">
</div>
</body>
</html>
which, in turn, should be running a function that creates a bunch of elements.
import React from 'react';
import './static/styles/App.css';
import ReactDOM from 'react';
import game from './vectors/game.svg';
import v1 from './vectors/v1.svg';
import v2 from './vectors/v2.svg';
import flower4 from './vectors/flower4.svg';
import unity from './vectors/unity.svg';
import box from './vectors/box.svg';
import map1 from './vectors/map1.svg';
// <img class="map1" src={map1}/>
function DataStructures() {
const section = 'lists';
return (
<div>
<section class = "section">Allah'u'abha</section>
<div>
<div >
<div></div>
<div class = "listBox1"></div>
<div class = "indexBox1"></div>
<div class = "boxIndex1"></div>
</div>
</div>
<div>
<div >
<div class = "listBoxes1"></div>
<div class = "listBoxes2"></div>
<div class = "listBoxes3"></div>
</div>
</div>
<div>
<div >
<div class = "listBoxes1b"></div>
<div class = "listBoxes2b"></div>
<div class = "listBoxes3b"></div>
<div class = "boxIndex1b"></div>
<div class = "indexValue"></div>
</div>
</div>
<div>
<div >
<img class="flower2" src={v1}/>
<img class="flower3" src={v2}/>
<img class="flower4" src={flower4}/>
</div>
<div class="metabox">
<img class="flower5" src={flower4}/>
</div>
<div >
<img class="box" src={v2}/>
</div>
</div>
</div>
);
}
ReactDOM.render(
<DataStructures />,
document.getElementById('root')
);
The issue is, nothing but the background color for the page is coming up. Im trying to understand what i'm missing here. Do i need to edit my project structure, or might it be something else?
Since your React component is in JSX form the problem is most likely because the JSX needs to be transpiled into JavaScript that is browser-readable. Toolchains you are probably used to like Create-React-App will transpile for you (using Babel) but in Flask as far as I know you have to handle it yourself.
With Flask there are a few tutorials for making a toolchain for integrating with React out there but if you already have a pretty extensive Flask app it can be tricky.
My workaround was to initialize NPM for the project, install the babel-cli package, pre-transpile JSX files into JS and then link the HTML page to the transpiled JS file.
You can install by running the following commands:
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
From there, you run this command:
npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod
where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.
Once you have the outputted .js files try to associate them with the HTML page as you normally would using the script tag and it should render properly.
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'm a project and that project have a "bootstrap" own, and i would want to import it for my render.
I created an archive HTML with the scripts:
<html>
<head>
<script> //1.www.s81c.com/common/v18/css/www.css</script>
<script> //1.www.s81c.com/common/stats/ida_stats.js</script>
<script> //1.www.s81c.com/common/v18/js/www.js</script>
</head>
</html>
and imported in my App.js:
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
***import './V18.html'***;
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 class="nameOfClassImported" className="App-title">BEM VINDX</h1>
</header>
To get started, edit <code>src/App.js</code> and save to reload.
</div>
);
}
}
export default App;
but given that error:
> Failed to compile.
./src/V18.html
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <html>
| <head>
| <script> //1.www.s81c.com/common/v18/css/www.css</script>
Resume:
I want to import scripts for i to use in my App.js
I think the tag for the .css file should be <link>.
There are multiple ways to import external scripts. One way that does work is to move these scripts to the <head> of your public/index.html.
/// public/index.html ///
<html>
<head>
<script src="//1.www.s81c.com/common/stats/ida_stats.js"></script>
<link href="//1.www.s81c.com/common/v18/css/www.css" rel="stylesheet">
<script src="//1.www.s81c.com/common/v18/js/www.js"></script>
/// rest of public/index.html ///
Those scripts will be downloaded when your page loads and you can access the variables in those scripts on the window object. After linking to these from your public/index.html, restart your React app, then open the console with F12 or Command-Option-i and type window into the console. There you will see all the global functions that are available from within your React app including window.IBMCore, window.Modernizr, etc
Have you tried this?
<script type='text/javascript' src='..//1.www.s81c.com/common/stats/ida_stats.js'></script>
and for following can you try a regular <link /> instead of <script>
import those in index.html path is public.index.html. Because your app put in one of div of same html page.
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
Read this how webpack work.
https://webpack.js.org/configuration/externals/
else other way is save file and import at App.js
import './App.scss';
I am rendering this component from the main component. I am facing issues with Modal in react-bootstrap. My modal is not showing up properly. i have attached the screenshot of how my modal looks. Please if anyone could help?
This is how my model shows up
https://i.stack.imgur.com/wvnmU.png
import React, { Component } from 'react';
import Button from 'react-bootstrap/lib/Button';
import Modal from 'react-bootstrap/lib/Modal';
class Add_Recipe extends Component {
constructor(){
super();
this.state={
showAdd: false
};
}
handleAddRecipe(e){
this.setState({showAdd: true});
}
close() {
this.setState({ showAdd: false });
}
render() {
return(
<div className="Add_Recipe">
<Button onClick ={this.handleAddRecipe.bind(this)} bsStyle="primary" bsSize="large"> Add Recipe </Button>
<Modal show={this.state.showAdd} onHide={this.close}>
<Modal.Header closeButton>
<Modal.Title id="modalTitle">Add a Recipe</Modal.Title>
</Modal.Header>
<Modal.Body>
<p>
Hello i am Modal..!!
</p>
</Modal.Body>
<Modal.Footer>
<p>
Hello I am Footer
</p>
</Modal.Footer>
</Modal>
</div>
);
}
}
export default Add_Recipe;
This is my index.html file
<!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">
<!--
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">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!--
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
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`.
-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</body>
</html>
This is my index.js file
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import Bootstrap from 'bootstrap/dist/css/bootstrap.css';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
I'm pretty new to this react/nodejs/bootstrap affair. I'm trying to make use of the reactjs-adminlte theme for bootstrap. I can get bootstrap widgets to work fine, such as buttons, but having trouble with this theme. The error I get is
React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
My code is as follows
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=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`.
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins
folder instead of downloading all of them to reduce the load. -->
<link rel="stylesheet" href="dist/css/skins/_all-skins.min.css">
<title>React App</title>
</head>
<body class="skin-blue sidebar-mini ">
<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`.
-->
<script src="/dist/js/vendors.js"></script>
<script src="/dist/js/app.bundle.js"></script>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
App.js
import React, { Component } from 'react';
import './App.css';
import Sidebar from 'adminlte-reactjs';
class App extends Component {
render() {
return (
<div className="App">
<Sidebar>
</Sidebar>
</div>
);
}
}
export default App;
Would love to know why i cant get the Sidebar to display. Its probably something simple that im missing.
Thanks
maybe you should change:
import Sidebar from 'adminlte-reactjs';
to
import {Sidebar} from 'adminlte-reactjs';
or:
import adminlteReactjs from 'adminlte-reactjs';
let Sidebar = adminlteReactjs.Sidebar;
<Sidebar>
</Sidebar>