Hello i can not deply on github pages, and i think i tried everything. Page go blank, when i remove index.html from main folder (default path is public folder) side is showing readme file.
Full code : https://github.com/mr-krystian-stawarczyk/Porfolio
Also installing npm gh-pages does not upload gh-pages branch to github site.
It looks like root div is not injected.
json
{
"name": "portfolio-project",
"version": "0.1.0",
"private": false,
"dependencies": {
"homepage" : "https://mr-krystian-stawarczyk.github.io/Porfolio",
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/react-fontawesome": "^0.1.14",
"#testing-library/jest-dom": "^5.12.0",
"#testing-library/react": "^11.2.6",
"#testing-library/user-event": "^12.8.3",
"bootstrap": "^4.6.0",
"emailjs-com": "^2.6.4",
"jquery": "0.0.1-security",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-fontawesome": "^1.7.1",
"react-hook-form": "^7.5.3",
"react-particles-js": "^3.4.1",
"react-popupbox": "^2.0.8",
"react-responsive-carousel": "^3.2.18",
"react-scripts": "4.0.3",
"react-scroll": "^1.8.2",
"react-share": "^4.4.0",
"react-typed": "^1.2.0",
"react-update-popup": "^1.0.3",
"reactjs-popup": "^2.0.4",
"web-vitals": "^1.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"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"
}
}
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
crossorigin="anonymous"
/>
<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>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script
src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"
></script>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"
integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"
></script>
<script
src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"
integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"
></script>
</body>
</html>
PLEASE HELP :(
Related
I am developing a shareable widget with client as react 18 and server side as Asp.net mvc core 6 which can be called by using following approach:
When I try to run the npm run build command then I can see the following index.html page in build directory and there are some js, css plugins and images in the build directory.
<!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.6134db66.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 my main focus is on calling js, css and image resources if I develop the widget. My widget can be accessed through a js and css plugin including a div element.
Now see following URLs will be dynamically generated each time.
src="/static/js/main.6134db66.js"
href="/static/css/main.073c9b0a.css"
How would I give it to my customers/clients if name 'll be changed after each npm run build.
You can see my client application source below which is calling my widget.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="http://localhost:3000/static/css/main.073c9b0a.css" rel="stylesheet"></head>
<script defer="defer" src="http://localhost:3000/static/js/main.6134db66.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
I can place it on one of my server domain but how to keep the plug name same ? I am also curios about my widget images. Will my widget image work correctly or 'll I have do something more for it ?
Any help will be appreciated.
See my package.json
{
"name": "widget",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I faced the same issue and solved it using react-app-rewired on a CRA, so I could modify the webpack config without ejecting the CRA.
You should install react-app-rewired and then configure your config-overrides.js and webpack.config.js like I show below:
// config-overrides.js
module.exports = function override(config, env) {
//do stuff with the webpack config...
config = {
...config,
output: {
...config.output,
library: "AwesomeWidget", // Important, the name of the lib to be exported
libraryTarget: "umd",
umdNamedDefine: true,
},
};
return config;
};
// webpack.config.js
module.exports = {
entry: {
"bundle.js": glob
.sync("build/static/?(js|css)/main.*.?(js|css)")
.map((f) => path.resolve(__dirname, f)),
},
output: {
library: "AwesomeWidget",
libraryTarget: "umd",
umdNamedDefine: true,
clean: true,
path: path.resolve(__dirname, "public/example/static"),
filename: "bundle.min.js", // Important, the name of the exported bundle, always the same name.
},
};
After that, you need to set scripts in your package.json, adding build scripts like so:
"scripts": {
"start": "react-app-rewired start",
"build": "yarn build:react && yarn build:bundle",
"build:react": "react-app-rewired build",
"build:bundle": "webpack --config webpack.config.js",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
},
As you can see, when running npm run build it will create a normal build (build:react) and then it will build using our custom webpack config (build:bundle).
This way, you will have exported a JS file always with the same name in public/example/static/bundle.min.js.
Then, I use this bundle in any HTML like this:
<script
src="url/to/bundle.min.js"
type="text/javascript"
></script>
<script type="text/javascript">
if (!!AwesomeWidget) {
// use your code here
AwesomeWidget.customMethod();
}
</script>
It may be a better way to solve it, hope it works for you.
I am trying to develop a widget in reactjs which can be called by using following approach:
When I try to run the npm run build command then I can see the following index.html page in build directory and there are some js, css plugins and images in the build directory.
<!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.6134db66.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 my main focus is on calling js, css and image resources if I develop the widget.
My widget can be accessed through a js and css plugin including a div element.
Now see following URLs will be dynamically generated each time.
src="/static/js/main.6134db66.js"
href="/static/css/main.073c9b0a.css"
How would I give it to my customers/clients if name 'll be changed after each npm run build.
You can see my client application source below which is calling my widget.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link href="http://localhost:3000/static/css/main.073c9b0a.css" rel="stylesheet"></head>
<script defer="defer" src="http://localhost:3000/static/js/main.6134db66.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
I can place it on one of my server domain but how to keep the plug name same ?
I am also curios about my widget images. Will my widget image work correctly or 'll I have do something more for it ?
Any help will be appreciated.
See my package.json
{
"name": "widget",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^5.16.3",
"#testing-library/react": "^12.1.4",
"#testing-library/user-event": "^13.5.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
if someone want to ask something then please ask.
I spend a few days learning webpack and think I got it all together but when I do npm start the browser window looks like the image belove.
I have this Reactjs project that works ok and wanted to transit it to use webpack.
Please advice why not the index.js is called?
Here is my webpack.config.js
const webpack = require('webpack');
const port = process.env.PORT || 6545;
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader']
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/'
}
}
]
},
{
test: /\.(png|jpe?g|gif)$/i,
loader: 'file-loader',
options: {
name: '[name].[ext]',
},
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
'css-loader',
'sass-loader'
]
})
},
],
},
plugins: [
new ExtractTextPlugin('styles.css'),
],
devServer: {
host: 'localhost',
port: port,
historyApiFallback: true,
open: true,
index: 'index.html',
contentBase: './public'
}
};
Here's my package.json
{
"name": "greta-thunberg-fff",
"version": "0.1.5",
"private": true,
"main": "dist/index.js",
"module": "dist/index.js",
"files": [
"dist",
"README.md"
],
"dependencies": {
"axios": "^0.19.2",
"babel-cli": "^6.26.0",
"chroma-js": "^2.1.0",
"clean-tag": "^3.1.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"google-fonts-complete": "^2.1.0",
"lodash": "^4.17.19",
"moment": "^2.27.0",
"normalize-wheel": "^1.0.1",
"react": "^16.8.4",
"react-dom": "^16.8.4",
"react-motion": "^0.5.2",
"react-resize-detector": "^5.0.7",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.0",
"react-slick": "^0.27.3",
"react-tilt": "^0.1.4",
"react-transition-group": "^4.4.1",
"react-visibility-sensor": "^5.1.1",
"rebass": "^4.0.7",
"save": "^2.4.0",
"slick-carousel": "^1.8.1",
"styled-system": "^5.1.5",
"typescript": "^3.9.7",
"webpack": "^4.44.1"
},
"peerDependencies": {
"react": "^16.13.1",
"react-dom": "^16.13.1"
},
"scripts": {
"start": "webpack-dev-server --open --mode development",
"build": "webpack --mode development",
"test": "react-scripts test",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -b master -d build"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
],
"devDependencies": {
"#babel/core": "^7.11.4",
"#babel/plugin-proposal-class-properties": "^7.10.4",
"#babel/preset-env": "^7.11.0",
"#babel/preset-react": "^7.10.4",
"axios": "^0.19.2",
"babel-cli": "^6.26.0",
"babel-loader": "^8.1.0",
"babel-plugin-macros": "^2.8.0",
"bulma": "^0.9.0",
"chroma-js": "^2.1.0",
"clean-tag": "^3.1.1",
"css-loader": "^4.2.1",
"enzyme": "^3.11.0",
"enzyme-adapter-react-16": "^1.15.3",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^6.0.0",
"gh-pages": "^2.0.1",
"google-fonts-complete": "^2.1.0",
"json-loader": "^0.5.7",
"mini-css-extract-plugin": "^0.10.0",
"node-sass": "^4.14.1",
"preval.macro": "^5.0.0",
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-hot-loader": "^4.12.21",
"react-loadable": "^5.5.0",
"react-motion": "^0.5.2",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "^3.4.3",
"rebass": "^4.0.7",
"sass-loader": "^9.0.3",
"style-loader": "^1.2.1",
"styled-components": "^5.1.1",
"styled-system": "^5.1.5",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"
}
}
And when I run this with debug in VCode it just looks like this
Here is 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, user-scalable=0" />
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
<meta property="og:image" content="http://greta.portplays.com/images/GretaThunberg%20collage3.png" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="application-name" content="100 weeks with Greta Thunberg">
<meta name="apple-mobile-web-app-title" content="100 weeks with Greta Thunberg">
<meta name="theme-color" content="#3273DC" />
<meta name="msapplication-navbutton-color" content="00ff66">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="msapplication-starturl" content="/http://greta.portplays.com/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="apple-touch-icon" sizes="57x57" href="./images/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="./images/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="./images/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="./images/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="./images/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="./images/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="./images/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="./images/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="./images/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="./images/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="./images/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="./images/favicon/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<meta name="description" coscript.js ntent="This is a fan-site about Greta Thunberg" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">
<link rel="stylesheet" href="./css/bulma-timeline.min.css">
<title></title>
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,700,900" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css'>
<script defer src="https://use.fontawesome.com/releases/v5.4.0/js/all.js"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.js'></script>
<!-- <script src="./script.js"></script> -->
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.min.js"></script>
</body>
</html>
My react application is built using create react app https://reactjs.org/docs/create-a-new-react-app.html fails to start.
When i exec npm run start my application hangs with the following message.
Starting the development server...
package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
"#types/jest": "^25.1.1",
"#types/node": "^13.7.0",
"#types/react": "^16.9.19",
"#types/react-dom": "^16.9.5",
"#types/react-router-dom": "^5.1.3",
"axios": "^0.19.2",
"lodash": "^4.17.15",
"node-sass": "^4.13.1",
"npm-check-updates": "^4.0.1",
"qs": "^6.9.1",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.3.1",
"typescript": "^3.7.5"
},
"scripts": {
"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": {
"#semantic-release/gitlab": "^6.0.2",
"semantic-release": "^17.0.2"
},
"release": {
"branch": "master",
"plugins": [
"#semantic-release/commit-analyzer",
"#semantic-release/release-notes-generator",
[
"#semantic-release/gitlab",
{
"gitlabUrl": "https://git.companyname.com"
}
]
]
}
}
Node Version: v12.14.1
Npm Version: 6.13.4
I have tried this a few times and each time it fails it is creating a new node process i know this because it asks me to select a different port.
So far i have attempted the following process without any luck
rm -rf node_modules
npm install
npm start
If you have installed some packages yourself after creating react application using creat-react-app, it may be because, one of the installed packages is not working.
In the past, I had a problem like your case.
At that time, I have installed react-pdf package to show pdfs.
As a consequence, development server didn't start and whenever I run again it asked to choose another port.
After removing that package, it worked well.
So I think there may be not working module in the package.json.
In my opinion, it may be 'qs' packagae.
I copied your package.json file and ran it locally on my machine.
First I ran npm install
I then created /src/index.js and chucked in the following default code from create-react-app:
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(<div>We're in!</div>, document.getElementById("root"));
And I also created /public/index.html:
<!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="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>
</body>
</html>
Lastly, I ran npm start
The application ran fine, with the only concern being an out of date sub-dependency (Old version of corejs)
This leads me to think that the problem might be in your local setup.
I would recommend clearing your npm cache and trying again.
To clear your cache, run npm cache clear --f with elevated permissions.
My suggestion would then be to start a new app directory, just in case there's something corrupt in the existing directory.
For me it turned out restarting my computer fixed it.
I still don't know the cause of this as the environment has remained the same and apart from removing node_modules and npm install i did nothing else.
I fixed it by installing a previous version of npm-scripts
Try using this:
npm install react-scripts#2.1.8
I'm new to react and created a small app. Everything works fine on desktop, but the react part of the app doesn't show up on mobile. Can sby tell me what I should do?
http://dry-wildwood-76655.herokuapp.com/
package.json
{
"name": "udacitytransportationapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js",
"prod": "NODE_ENV=production node server.js",
"postinstall": "webpack -p"
},
"author": "",
"license": "ISC",
"dependencies": {
"babel-core": "^6.11.4",
"babel-loader": "^6.2.4",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-1": "^6.5.0",
"express": "^4.14.0",
"html-webpack-plugin": "^2.22.0",
"jquery": "^3.1.0",
"lodash": "^4.13.1",
"moment": "^2.14.1",
"offline-plugin": "^3.4.2",
"react": "^15.2.1",
"react-dom": "^15.2.1",
"react-router": "^2.6.0",
"webpack": "^1.13.1"
},
"devDependencies": {
"mocha": "^2.5.3",
"webpack-dev-server": "^1.14.1"
}
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Transportation App</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/style/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
</head>
<body>
<div class="header">
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">TransportationApp</div>
</div>
<ul class="nav navbar-nav navbar-right">
<li>
With this app you can search through the BART station schedules
</li>
</ul>
</div>
</nav>
</div>
<div class="container"></div>
</body>
<script src="/bundle.js"></script>
</html>
style/style.css
.bart-image {
width: 300px;
height: 300px;
}
.table-row {
padding-top:30px;
}
Your problem is with using fetch. If you look at the documentation https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API you can see it is not supported in all browsers. This is why it is showing up in desktop chrome but not safari and why it doesn't work on mobile.