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.
Related
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 :(
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>
I am trying to use the layouts properties from AngularJs Material. For example layout, layout-margin, flex but for some reason it is not applying to the css.
I can use md-raised-button, md-toolbar, md-autocomplete, md-form-field. So looks like my configuration is correct.
Inside the app.module.ts i have:
import { BrowserModule } from '#angular/platform-browser';
import { NgModule } from '#angular/core';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
import { BrowserAnimationsModule } from '#angular/platform-browser/animations';
import { MaterialModule, MdDatepickerModule, MdNativeDateModule } from '#angular/material';
import 'hammerjs';
My package.json has:
{
"name": "my-app",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "^4.3.6",
"#angular/cdk": "^2.0.0-beta.10",
"#angular/common": "^4.3.5",
"#angular/compiler": "^4.3.5",
"#angular/core": "^4.3.5",
"#angular/forms": "^4.3.5",
"#angular/http": "^4.3.5",
"#angular/material": "^2.0.0-beta.10",
"#angular/platform-browser": "^4.3.5",
"#angular/platform-browser-dynamic": "^4.3.5",
"#angular/platform-server": "^4.3.5",
"#angular/router": "^4.3.5",
"angular-in-memory-web-api": "0.3.2",
"core-js": "^2.4.1",
"hammerjs": "^2.0.8",
"rxjs": "^5.4.1",
"zone.js": "^0.8.14"
},
"devDependencies": {
"#angular/cli": "^1.5.0",
"#angular/compiler-cli": "^4.3.5",
"#angular/language-service": "^4.0.0",
"#types/jasmine": "~2.5.53",
"#types/jasminewd2": "~2.0.2",
"#types/node": "~6.0.60",
"codelyzer": "~3.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"node-sass": "^4.5.3",
"protractor": "~5.1.2",
"ts-node": "~3.0.4",
"tslint": "~5.3.2",
"typescript": "^2.3.4",
"webpack": "^3.8.1"
}
}
My index.html:
<!doctype html>
<html lang="en">
<head>
<base href="/">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My App</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" >
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<my-app></my-app>
</body>
</html>
Am i missing an import? I couldn't figure it out from the documentation.
Please let me know if you need more information.
Thanks
Angular Material - https://material.angular.io - uses not the same layout properties as AngularJS Material - https://material.angularjs.org - did. So you cannot use layout, layout-margin, flex, etc directly.
I guess it caused a lot of confusion in its time. I strongly advice you to rename the question and add the appropriate tags to avoid misunderstanding (as well as self-answer it, if you could). I'm sure you had already figured the difference out, but for the sake of encyclopaedic reasons (as soon as SO is a kind of encyclopaedia for developers now) it would be very cool to make this article useful for others in future.
Im getting the errors:
Error: transition superseded
at $StateProvider.$get (http://localhost:1337/angular-ui-router/release/angular-ui-router.js:2903:42)
Error: transition prevented
Error: transition aborted
Error: transition failed
I found a similar post where he suggested solution is to update angular-ui-router to 0.3.1 however when I update it, it is being updated only to version 0.2.18, i checked the documentation which speaks about 0.2.18 as well so Im a little confused. I couldnt find anything else online and hope someone has an idea as I have no clue why Im getting those errors.
Thanks!
<!DOCTYPE html>
<html lang="en">
<head>
<base href="/" />
<title>An app</title>
<link rel="stylesheet" type="text/css" href="/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" type="text/css" href="/style.css" />
<link rel="stylesheet" href="/materialize-css/bin/materialize.css">
<script src="/lodash/index.js"></script>
<script type="text/javascript" src="/jquery/dist/jquery.min.js"></script>
<script src="/angular/angular.js"></script>
<script src="/angular-animate/angular-animate.js"></script>
<script src="/angular-ui-router/release/angular-ui-router.js"></script>
<script src="/angular-ui-router-styles/ui-router-styles.js"></script>
<script type="text/javascript" src="/materialize-css/bin/materialize.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap.js"></script>
<script src="/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
<script src="/socket.io-client/socket.io.js"></script>
<script src="/main.js"></script>
</head>
<body ng-app="myApp">
<navbar></navbar>
<div id="main" ui-view></div>
</body>
</html>
app.js
window.app = angular.module('myapp', ['ui.router', 'ui.bootstrap', 'ngAnimate']);
app.config(function ($urlRouterProvider, $locationProvider) {
$locationProvider.html5Mode(true);
$urlRouterProvider.otherwise('/');
});
part of package.json
},
"engines": {
"node": ">=4.0.0"
},
"dependencies": {
"angular": "^1.6.2",
"angular-animate": "^1.6.2",
"angular-mocks": "^1.4.0",
"angular-ui-bootstrap": "^0.14.3",
"angular-ui-router": "^0.2.18",
"babel-preset-es2015": "^6.6.0",
"babel-register": "^6.6.0",
"bluebird": "^3.4.7",
"body-parser": "^1.12.0",
"bootstrap": "^3.3.7",
"chalk": "^1.0.0",
"connect-session-sequelize": "^3.0.0",
"cookie-parser": "^1.3.4",
"express": "^4.12.0",
"express-session": "^1.10.3",
"gulp": "^3.8.11",
"gulp-babel": "^6.1.2",
"gulp-concat": "^2.5.2",
"gulp-eslint": "^0.14.0",
"gulp-istanbul": "^0.9.0",
"gulp-livereload": "^3.7.0",
"gulp-minify-css": "^0.4.6",
"gulp-mocha": "^2.0.0",
"gulp-ng-annotate": "^0.5.2",
"gulp-notify": "^2.2.0",
"gulp-plumber": "^0.6.6",
"gulp-rename": "^1.2.0",
"gulp-sass": "^2.0.4",
"gulp-sourcemaps": "^1.3.0",
"gulp-uglify": "^1.1.0",
"jquery": "^3.1.1",
"lodash": "^3.9.3",
"materialize-css": "^0.98.0",
"nodemon": "^1.3.7",
"passport": "^0.2.1",
"passport-local": "^1.0.0",
"pg": "^4.5.5",
"pg-hstore": "^2.3.2",
"run-sequence": "^1.0.2",
"sequelize": "^3.23.3",
"socket.io": "^1.3.4",
"socket.io-client": "^1.3.5",
}
}
Why using an old version of ui-router when the new one is out there. Have you tried with :
"angular-ui-router": "1.0.0-rc.1",
After if that doesn't work, we need more information on your problem, maybe a plunker that shows the problem, with just the code you provided, it's hard to tell you what's wrong.
Also on a side note that has nothing to do with your questions, I advise you to separate your dependencies between dependencies and devDependencies. See here for more details
Remove "angular-ui-router": "^0.2.18", from package.json
just run command
npm install --save angular-ui-router
I am not sure I am doing it the right way. I have defined modules the following:
require('angular');
require('angular-ui-router');
var $ = require('jquery');
require('bootstrap');
I have my package.json file like this:
{
"name": "web",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"build": "browserify main.js -o bundle.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browserify": "^12.0.1"
},
"dependencies": {
"angular": "^1.4.8",
"angular-ui-router": "^0.2.15",
"bootstrap": "^3.3.6",
"bootstrap-social": "^4.11.0",
"font-awesome": "^4.5.0",
"jquery": "^2.1.4"
}
}
And my html page:
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="wrap">
<!--header-->
<div ui-view="header"></div>
<!--main content-->
<div ui-view="content"></div>
</div>
<!--push the footer down-->
<div id="push"></div>
<!--footer-->
<div ui-view="footer"></div>
<script src="bundle.js"></script>
<script src="commonViews/commonView.js"></script> //angular module defined
</body>
</html>
When I run the html page, I get an error in console saying "angular is not defined"
What I am doing wrong? I have run the command browserify maing.js -o bundle.js which minified all the code into bundle.js file and yet still the same error. Apart from that I am not able to bundle bootstrap and font-awesome css files. Is it true that broswerify doesn't support css files?