react project deployed on heroku is blank

react project deployed on heroku is blank - reactjs

This is my package.json file in the src folder
{
"homepage": "http:Khairiya.github.io/HW6_IS96G58JX7",
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1"
},
"scripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"gh-pages": "^3.1.0"
}
}
This is my app.js file in my src folder as well. the style file is located in the src folder and works perfectly with the bootstrap
import React from "react";
import logo from './logo.png';
import { Component} from "react";
import "./style.css"
class App extends Component {
constructor(props) {
super(props);
this.state = {
allData: {},
data:[],
isLoaded: false,
};
}
componentDidMount() {
fetch("https://disease.sh/v3/covid-19/all")
.then((response) => response.json())
.then(
(allData) => {
this.setState({
isLoaded: true,
allData: allData,
});
},
(error) => {
// handle your errors here
this.setState({
isLoaded: true,
error,
});
}
);
fetch(
"https://disease.sh/v3/covid-19/countries?sort=cases&allowNull=true"
)
.then((res) => res.json())
.then((data) => {
this.setState({
isLoaded: true,
data: data,
});
});
}
render() {
const { allData } = this.state;
const{ data } = this.state;
let update = data.map((item) => {
const { country, cases, deaths, recovered, active, } = item;
return (
<tbody key={country}>
<tr>
<td>{country}</td>
<td>{cases}</td>
<td>{active}</td>
<td>{recovered}</td>
<td>{deaths}</td>
</tr>
</tbody>
);
});
return (
<div className="App">
<div className="container">
<div className="row">
<p className="toprow">
<img src={logo} alt="logo" height="30px" />
Covid-19 Tracker
</p>
</div>
</div>
<div> </div>
<div> </div>
<div> </div>
<div className="container">
<div className="row justify-content-between">
<div className="col-sm-2 box">
<p>
Total Cases <i className="fa fa-arrow-alt-circle-up icons"></i>
</p>
<p className="counterPara">
<b>{allData.cases}</b>
</p>
</div>
<div className="col-sm-2 bo`enter code here`x">
<p>
Recovered{" "}
<i className="fa fa-arrow-alt-circle-down icons-green"></i>
</p>
<p className="counterPara">
<b>{allData.recovered}</b>
</p>
</div>
<div className="col-sm-2 box">
<p>
Active Cases <i className="fa fa-arrow-alt-circle-up icons"></i>
</p>
<p className="counterPara">
<b>{allData.active}</b>
</p>
</div>
<div className="col-sm-2 box">
<p>
Total Deaths <i className="fa fa-arrow-alt-circle-up icons"></i>
</p>
<p className="counterPara">
<b>{allData.deaths}</b>
</p>
</div>
</div>
</div>
<div> </div>
<div> </div>
<div> </div>
<div className="container">
<div className="row">
<div className="col-sm-8">
<table className="table table-striped">
<head>
<tr>
<th>Countries</th>
<th>Total Cases</th>
<th>Recovered</th>
<th>Active Cases</th>
<th>Deaths</th>
</tr>
</thead>
{update}
</table>
</div>
<div className="col-sm-4">
<div className="col align-self-end side-box">
<div className="row justify-content-center innerBoxPadding">
<div className="col-sm-5 inner-box">
<b>Health Tips</b>
</div>
</div>
</div>
<div> </div>
<div className="col align-self-end side-box">
<div className="row justify-content-center innerBoxPadding">
<div className="col-sm-6 inner-box">
<b>News & Update</b>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
This is my index.html file located in my public folder. this is where the bootstrap files were linked.
<!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>
<link rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-
JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</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://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-
DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-
9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"
integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"
integrity="sha512-
YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg=="
crossorigin="anonymous"></script>
</body>
</html>
So this is what I posted on heroku. it successfully pushed to gisthub. the code has no errors or warnings in console. please help

okay the problem was that, in pushing the app to github, I went through the right steps, thus, installing GitHub Pages package as a dev-dependency and adding the required properties to package.json file. These steps were not needed in deploying the hub to heroku. So, for the second app I created, I pushed the code to github without installing the dependencies and adding the required properties. After I pushed the app to heroku and it worked. The final website is at https://hw6-is96g58jx7.herokuapp.com/

Related

Parcel React How do i fix the set up error?

my index.js file
When i run a parcel/ react project i keep getting the error below
#parcel/transformer-js: Unexpected token ). Expected this, import, async, function, [ for array
literal, { for object literal, # for decorator, function, class, null, true, false, number,
bigint, string, regexp, ` for template literal, (, or an identifier
import { createRoot } from 'react-dom/client';
import App from './App/App';
const container = document.getElementById('root');
const root = createRoot(container);
// createRoot(container!) if you use TypeScript
root.render(<App/>);
//index.html file
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<link href="./index.css" rel="stylesheet">
<title>
My App
</title>
</head>
<body>
<div id="root">
</div>
<script type="module" src="./index.js">
</script>
</body>
</html>
/// my app.js file is below
export default function App() {
return (
<div className=''>
<h2 className='text-green-700 '>
Analytics
</h2>
</div>
)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
my package.json file
{
"devDependencies": {
"parcel": "2.4",
"postcss": "^8.4.14",
"tailwindcss": "^3.0.24"
},
"dependencies": {
"react-google-charts": "^4.0.0"
},
"name": "analytics",
"version": "1.0.0",
"description": "Analytic app",
"source": "src/index.html",
"main": "index.js",
"scripts": {
"start": "parcel",
"build": "parcel build"
},
"author": "Caldewood Alikula",
"license": "ISC"
}

Avoid include react and react-dom via CDN.
Install them as npm packages:
npm i react#16.6.3
npm i react-dom#16.6.3
Restart the server

Firebase and React hosting - not loading App.js

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.

Wow slider with react.js is not working

I have created a page with fullpage.js and in one of the sections I've integrated wow slider. Same thing is working perfectly in html page but not when integrated in react.js. Getting following error.
Uncaught TypeError: Cannot read property 'replace' of undefined
at N
Script for wow slider
function ws_glass_parallax(d,l,m){var f=jQuery;var i=f(this);var j=d.parallax||0.25;var k=f("<div>").css({position:"absolute",display:"none",top:0,left:0,width:"100%",height:"100%",overflow:"hidden"}).addClass("ws_effect ws_glass_parallax").appendTo(m);var h=!d.noCanvas&&!window.opera&&!!document.createElement("canvas").getContext;if(h){try{document.createElement("canvas").getContext("2d").getImageData(0,0,1,1)}catch(q){h=0}}function t(e){return Math.round(e*1000)/1000}var u=f("<div>").css({position:"absolute",left:0,top:0,overflow:"hidden",width:"100%",height:"100%",transform:"translate3d(0,0,0)",zIndex:1}).appendTo(k);var s=u.clone().appendTo(k);var r=u.clone().css({width:"20%"}).appendTo(k);var c;var p=u.clone().appendTo(k).css({zIndex:0});this.go=function(C,A,x){var e=f(l.get(A));e={position:"absolute",width:e.width(),height:e.height(),marginTop:e.css("marginTop"),marginLeft:e.css("marginLeft")};x=x?1:-1;var E=f(l.get(A)).clone().css(e).appendTo(u);var z=f(l.get(C)).clone().css(e).appendTo(s);var v=f(l.get(C)).clone().css(e).appendTo(r);if(x==-1){r.css({left:"auto",right:0});v.css({left:"auto",right:0})}else{r.css({left:0,right:"auto"});v.css({left:0,right:"auto"})}var D=(m.width()||d.width)*1.3;var B=m.height()||d.height;var y;if(h){if(!c){c=f("<canvas>").css({position:"absolute",left:0,top:0}).attr({width:e.width,height:e.height}).appendTo(p)}c.css(e).attr({width:e.width,height:e.height});y=o(f(l.get(C)),e,10,c.get(0))}if(!h||!y){h=0}wowAnimate(function(G){G=f.easing.swing(G);var L=t(x*G*D),F=t(x*(-D+G*D-(1-G)*D*0.2)),J=t(x*(-D*1.4+G*(D*1.4+D/1.3))),w=t(-x*D*j*G),H=t(x*D*j*(1-G)),I=t(-x*D*(j+0.2)*G),K=t(x*(-D*0.2+G*D*0.4));if(d.support.transform){u.css("transform","translate3d("+L+"px,0,0)");E.css("transform","translate3d("+w+"px,0,0)");s.css("transform","translate3d("+F+"px,0,0)");z.css("transform","translate3d("+H+"px,0,0)");r.css("transform","translate3d("+J+"px,0,0)");v.css("transform","scale(1.6) translate3d("+I+"px,0,0)");p.css("transform","translate3d("+K+"px,0,0)")}else{u.css("left",L);E.css("margin-left",w);s.css("left",F);z.css("margin-left",H);r.css("left",J);v.css("margin-left",I);p.css("left",K)}},0,1,d.duration,function(){k.hide();E.remove();z.remove();v.remove();i.trigger("effectEnd")})};function o(C,A,B,v){var F=(parseInt(C.parent().css("z-index"))||0)+1;if(h){var I=v.getContext("2d");I.drawImage(C.get(0),0,0,A.width,A.height);if(!a(I,0,0,v.width,v.height,B)){return 0}return f(v)}var J=f("<div></div>").css({position:"absolute","z-index":F,left:0,top:0}).css(A).appendTo(v);var H=(Math.sqrt(5)+1)/2;var w=1-H/2;for(var z=0;w*z<B;z++){var D=Math.PI*H*z;var e=(w*z+1);var G=e*Math.cos(D);var E=e*Math.sin(D);f(document.createElement("img")).attr("src",C.attr("src")).css({opacity:1/(z/1.8+1),position:"absolute","z-index":F,left:Math.round(G)+"px",top:Math.round(E)+"px",width:"100%",height:"100%"}).appendTo(J)}return J}var g=[512,512,456,512,328,456,335,512,405,328,271,456,388,335,292,512,454,405,364,328,298,271,496,456,420,388,360,335,312,292,273,512,482,454,428,405,383,364,345,328,312,298,284,271,259,496,475,456,437,420,404,388,374,360,347,335,323,312,302,292,282,273,265,512,497,482,468,454,441,428,417,405,394,383,373,364,354,345,337,328,320,312,305,298,291,284,278,271,265,259,507,496,485,475,465,456,446,437,428,420,412,404,396,388,381,374,367,360,354,347,341,335,329,323,318,312,307,302,297,292,287,282,278,273,269,265,261,512,505,497,489,482,475,468,461,454,447,441,435,428,422,417,411,405,399,394,389,383,378,373,368,364,359,354,350,345,341,337,332,328,324,320,316,312,309,305,301,298,294,291,287,284,281,278,274,271,268,265,262,259,257,507,501,496,491,485,480,475,470,465,460,456,451,446,442,437,433,428,424,420,416,412,408,404,400,396,392,388,385,381,377,374,370,367,363,360,357,354,350,347,344,341,338,335,332,329,326,323,320,318,315,312,310,307,304,302,299,297,294,292,289,287,285,282,280,278,275,273,271,269,267,265,263,261,259];var n=[9,11,12,13,13,14,14,15,15,15,15,16,16,16,16,17,17,17,17,17,17,17,18,18,18,18,18,18,18,18,18,19,19,19,19,19,19,19,19,19,19,19,19,19,19,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,20,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,21,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,22,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,23,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24,24];function a(am,U,S,v,w,ad){if(isNaN(ad)||ad<1){return}ad|=0;var ah;try{ah=am.getImageData(U,S,v,w)}catch(al){console.log("error:unable to access image data: "+al);return false}var C=ah.data;var ab,aa,aj,ag,J,M,G,A,B,R,H,T,P,X,ac,K,F,L,N,W;var ak=ad+ad+1;var Y=v<<2;var I=v-1;var af=w-1;var E=ad+1;var ae=E*(E+1)/2;var V=new b();var Q=V;for(aj=1;aj<ak;aj++){Q=Q.next=new b();if(aj==E){var D=Q}}Q.next=V;var ai=null;var Z=null;G=M=0;var O=g[ad];var z=n[ad];for(aa=0;aa<w;aa++){X=ac=K=A=B=R=0;H=E*(F=C[M]);T=E*(L=C[M+1]);P=E*(N=C[M+2]);A+=ae*F;B+=ae*L;R+=ae*N;Q=V;for(aj=0;aj<E;aj++){Q.r=F;Q.g=L;Q.b=N;Q=Q.next}for(aj=1;aj<E;aj++){ag=M+((I<aj?I:aj)<<2);A+=(Q.r=(F=C[ag]))*(W=E-aj);B+=(Q.g=(L=C[ag+1]))*W;R+=(Q.b=(N=C[ag+2]))*W;X+=F;ac+=L;K+=N;Q=Q.next}ai=V;Z=D;for(ab=0;ab<v;ab++){C[M]=(A*O)>>z;C[M+1]=(B*O)>>z;C[M+2]=(R*O)>>z;A-=H;B-=T;R-=P;H-=ai.r;T-=ai.g;P-=ai.b;ag=(G+((ag=ab+ad+1)<I?ag:I))<<2;X+=(ai.r=C[ag]);ac+=(ai.g=C[ag+1]);K+=(ai.b=C[ag+2]);A+=X;B+=ac;R+=K;ai=ai.next;H+=(F=Z.r);T+=(L=Z.g);P+=(N=Z.b);X-=F;ac-=L;K-=N;Z=Z.next;M+=4}G+=v}for(ab=0;ab<v;ab++){ac=K=X=B=R=A=0;M=ab<<2;H=E*(F=C[M]);T=E*(L=C[M+1]);P=E*(N=C[M+2]);A+=ae*F;B+=ae*L;R+=ae*N;Q=V;for(aj=0;aj<E;aj++){Q.r=F;Q.g=L;Q.b=N;Q=Q.next}J=v;for(aj=1;aj<=ad;aj++){M=(J+ab)<<2;A+=(Q.r=(F=C[M]))*(W=E-aj);B+=(Q.g=(L=C[M+1]))*W;R+=(Q.b=(N=C[M+2]))*W;X+=F;ac+=L;K+=N;Q=Q.next;if(aj<af){J+=v}}M=ab;ai=V;Z=D;for(aa=0;aa<w;aa++){ag=M<<2;C[ag]=(A*O)>>z;C[ag+1]=(B*O)>>z;C[ag+2]=(R*O)>>z;A-=H;B-=T;R-=P;H-=ai.r;T-=ai.g;P-=ai.b;ag=(ab+(((ag=aa+E)<af?ag:af)*v))<<2;A+=(X+=(ai.r=C[ag]));B+=(ac+=(ai.g=C[ag+1]));R+=(K+=(ai.b=C[ag+2]));ai=ai.next;H+=(F=Z.r);T+=(L=Z.g);P+=(N=Z.b);X-=F;ac-=L;K-=N;Z=Z.next;M+=v}}am.putImageData(ah,U,S);return true}function b(){this.r=0;this.g=0;this.b=0;this.a=0;this.next=null}};
jQuery("#wowslider-container1").wowSlider({effect:"glass_parallax",prev:"",next:"",duration:20*100,delay:20*100,width:640,height:360,autoPlay:false,autoPlayVideo:false,playPause:false,stopOnHover:false,loop:false,bullets:1,caption:true,captionEffect:"traces",controls:false,controlsThumb:false,responsive:2,fullScreen:false,gestures:2,onBeforeStep:0,images:0});
Created app using create-react-app
App.js code
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<ul id="menu">
<li data-menuanchor="firstPage">firstPage</li>
<li data-menuanchor="secondPage">secondPage</li>
<li data-menuanchor="3rdPage">3rdPage</li>
<li data-menuanchor="4thpage">4thpage</li>
<li data-menuanchor="5thpage">5thpage</li>
</ul>
<div id="fullpage">
<div className="section " id="section0">
<div className="intro">
<p>Your Virtual Assistant</p>
<p>Free your time for the things that matter to you.</p>
<p>be part of the first release, <br/> duw out shortly</p>
Sign up today
</div>
</div>
<div className="section" id="section1">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
<div className="section" id="section2">
<div id="wowslider-container1">
<div className="ws_images"><ul>
<li><img src="images/background_1.jpg" alt="Background_1" title="Background_1" id="wows1_0"/></li>
<li><img src="images/sample_1.jpg" alt="Sample_1" title="Sample_1" id="wows1_1"/></li>
<li><img src="images/sample_2.jpg" alt="javascript carousel" title="Sample_2" id="wows1_2"/></li>
<li><img src="images/sample_3.jpg" alt="Sample_3" title="Sample_3" id="wows1_3"/></li>
</ul></div>
<div className="ws_bullets"><div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
</div></div><div className="ws_script" >css image gallery by WOWSlider.com v8.8m</div>
<div className="ws_shadow"></div>
</div>
</div>
<div className="section" id="section3">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
<div className="section" id="section4">
<div className="intro">
<h1>No limitations!</h1>
<p>Content is a priority. Even if it is so large :)</p>
</div>
</div>
</div>
</div>
);
}
}
export default App;
index.html page code
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.8.1/jquery.fullPage.min.css">
<link rel="stylesheet" type="text/css" href="css/examples.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/scrolloverflow.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/examples.js"></script>
<script type="text/javascript" src="js/wowslider.js"></script>
<script type="text/javascript" src="js/script.js"></script><script type="text/javascript">
$(document).ready(function() {
$('#fullpage').fullpage({
// anchors: ['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage'],
sectionsColor: ['#4A6FB1', '#939FAA', '#323539','#4A6FB1','#939FAA'],
// scrollOverflow: true
// sectionsColor: ['', '#939FAA', '#fff','#fff','','#fff','',''],
anchors:
['firstPage', 'secondPage', '3rdPage', '4thpage', '5thpage','6thpage','7thpage','8thpage'],
menu: '#menu',
css3: true,
scrollingSpeed: 1000,
scrollOverflow: true,
fixedElements: '10',
// paddingTop: '3em',
lockAnchors: true,
// scrollBar:true,
onLeave: function(){
}
});
});
</script>
</body>
</html>

If you want to keep the revision as little as possible, try to prefix the window to external library (use as global variable)
jQuery("#wowslider-container1").wowSlider(...)
to
window.jQuery("#wowslider-container1").wowSlider(...)
Here is explanation on CRA doc.
The part I could not understand is that why you need the function
function ws_glass_parallax(d,l,m){...}
in your script.js.
But I cannot make sure it would work as expected cause that I think this is not the anticipated way to develop in react.
My suggestion, including the fullpage utilization you deployed in index.html should just move to componentDidMount() which could roughly seem as the same place as $(document).ready(function() {})
so the whole picture should be:
App.js
import React, { Component } from 'react';
import './App.css';
class App extends Component {
componentDidMount() {
window.JQuery(this.refs.fullpageEle).fullpage({...});
window.JQuery(this.refs.wow).wowSlider({...});
}
render() {
return (
<div className="App">
<ul id="menu"> ... </ul>
<div id="fullpage" ref="fullpage" >
<div className="section" id="section0"> ... </div>
<div className="section" id="section1"> ... </div>
<div className="section" id="section2">
<div id="wowslider-container1" ref="wow">
</div>
</div>
<div className="section" id="section3"> ... </div>
<div className="section" id="section4"> ... </div>
</div>
</div>);
}
}
export default App;
Something may be new to you is ref which I add in your target element and we refer the element by it in componenetDidMount(), here is the description on official doc.
And leave index.html only including external source but not JS code.

Inline angular template

I've been trying to make a small website that has a main page where a part is changed using templates. I've made an HTML file that contains a small menu for choosing what to show and two templates. If i use the google CDN it works without any problems but i would like to use a local version of angular but that breaks my site and the routing doens't work. The HTML and JS file can be seen below.
Can anyone see what i'm missing?
HTML file:
<!DOCTYPE html>
<html ng-app="myApp" ng-csp="">
<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>Test app</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="icon" href="images/favicon.ico">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-callout.css">
<link rel="stylesheet" href="css/bootstrap-datepicker3.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script> -->
<script src="angular/angular-1.6.1/angular.js"></script>
<script src="angular/angular-1.6.1/angular-route.js"></script>
<script src="js/app.js"></script>
</head>
<body class="backgroundColor">
<div class="divHeader">
<div class="center-header">
<div class="container" style="">
<a ng-href="#/">
</a>
</div>
</div>
</div>
<div>
<ul class="topnav" id="myTopnav">
<li>Home</li>
<li>Page 1</li>
<li><a ng-href="#/">Home</a></li>
<li class="icon">
☰
</li>
</ul>
</div>
<div class="edge edge-shadow"></div>
<script type="text/ng-template" id="main.html">
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">Home</div>
<div class="panel-body">Home Page!</div>
</div>
</div>
</script>
<script type="text/ng-template" id="Page1.html">
<div>
<p>Hello</p>
<iframe class="browserframe" id='myiframe' src="http://www.google.com" scrolling="auto" frameborder="0">
</iframe>
</div>
</script>
<div ng-view>
</div>
</body>
<footer>
</footer>
</html>
app.js file:
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider,$compileProvider) {
$compileProvider.aHrefSanitizationWhitelist (/^\s*(https?|ftp|mailto|file|tel|chrome-extension):/);
$routeProvider
.when("/", {
templateUrl : 'main.html',
controller : "MainController"
})
.when("/Page1", {
templateUrl: 'Page1.html',
controller: 'Page1Controller'
})
.otherwise( {
templateUrl : 'main.html',
controller : "MainController"
})
});
app.controller('MainController', function ($scope){
});
app.controller('Page1Controller', function ($scope){
});
function resizeMenu() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function resizeIframe(obj) {
obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
}

To add local angularjs files, you can use bower. You can install it globally with npm through the following command : npm install -g bower.
Then you can create a bower.json file :
{
"name": "app-name",
"authors": [],
"description": "app description",
"main": "",
"license": "MIT",
"homepage": "",
"version": "1.0.0",
"dependencies": {
"angular": "^1.4.8",
"angular-route": "^1.4.8"
}
}
You just have to run bower install : it will create a repository bower_components with the angularjs local files.
Finally, you change the path in your index.html to match the location. If the bower.json file is next to the index.html, the paths would be :
bower_components/angular/angular.min.js
bower_components/angular-route/angular-route.min.js

I used a different version of angular than the google CDN. Once i changed my downloaded angular to 1.4.8 it worked.

adding logo in angularjs application

hi friends i am new to this mean stack application. I want to insert a
logo in my application i used the fallowing code in index.html file
<html ng-app="myapp">
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script data-require="angular.js#1.2.21" data-semver="1.2.21" src="https://code.angularjs.org/1.2.21/angular.js"></script>
<!-- <script src="https://d3js.org/d3.v4.min.js"></script>
<script src="smart-table.debug.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.3.1/angular-ui-router.min.js"></script><!-- ui router cdn -->
<script src="controller.js"></script>
<script src="config.js"></script>
</head>
<body ng-controller="finance" class="container">
<div id="banner">
<div id="page-header">
<div class="container">
<img id="logo-main" src="../images/saf-logo.png" width="500" height="75" alt="Logo Thing main logo" class="image-responsive">
</div>
</div>
</div>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
</div>
<ul class="nav navbar-nav">
<li><a ui-sref="add-client">Register Form</a></li>
<li><a ui-sref="client-view">Clients View</a></li>
<!-- <li><a ui-sref="chart">Chart</a></li> -->
</ul>
</div>
</nav>
<div class="container">
<!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
<div ui-view> </div>
</div>
</body>
</html>
But it shows the fallowing error in console when i run the
application. GET http://localhost:8000/images/saf-logo.png 404 (Not
Found)
I using the angularjs expressjs mongodb and node.js
controler.js
var app = angular.module('myapp', ['ui.router']);
console.log("controller out side");
app.controller('finance',['$scope',function($scope){
// console.log("inside controller");
}])
express code.
var express=require('express');
var app=express();
var bodyParser=require('body-parser');
app.use(bodyParser.json());
app.use(express.static('public'));
app.use(bodyParser.urlencoded({extended: true}))
console.log("welcome to finance app");
app.listen(8000);
package.json file
{
"name": "finance",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {
"angular": "^1.5.10",
"angular-animate": "^1.5.10",
"angular-aria": "^1.5.10",
"body-parser": "^1.15.2",
"http-server": "^0.9.0",
"mongoose": "^4.7.5",
"angular-material": "^1.1.1",
"nodemon": "^1.11.0",
"express": "^4.14.0"
},
"devDependencies": {},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"index":"nodemon src/index.js"
},
"author": "",
"license": "ISC"
}