I use aws ec2 with elastic beanstalk(eb) to deploy application then I try to access application I got empty page and no error on console. I put my template under
app/assets/templates/simple_template.html.erb
Then I tried to check with server in rails log (production.log) nginx log (access.log , error.log) is no any error in these logs
I search on Google then I found some people talk about
gem sprockets
then I put gem 'sprockets', '~> 3.0' to gem file is still not working
More Detail
Empty page
Inspect HTML
jdgray I tried many debug I just found and post it in here https://github.com/pitr/angular-rails-templates/issues/155
Checkout this
use strict'
alert('route'); <----- is working
angular.module('core').config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {
// Redirect to 404 when route not found
$urlRouterProvider.otherwise(function ($injector, $location) {
$injector.get('$state').transitionTo('not-found', null, {
location: false
});
});
alert('inside route') <--- is working
// Home state routing
$stateProvider
.state('home', {
url: '/',
abstract: true,
templateUrl: 'players/layout/home.client.view.html',
controllerAs: 'vm',
controller: 'MasterController',
resolve: {
user_noti: function($http, $stateParams,jwtHelper, $window) {
alert('insde part') <--- not woking
if($window.user) {
return $http.get('/api/v1/notifications');
} else {
return [];
}
},
user_unconfrim_ticket: function($http, $stateParams,jwtHelper, $window){
if($window.user) {
return $http.get('/api/v1/tickets/unconfrim');
} else {
return [];
}
}
}
})
.state('home.index', {
url: '',
controllerAs: 'vm',
controller: 'HomeController',
data: {
ignoreState: true
},
templateUrl: 'players/home.client.view.html',
resolve: {
reward_data: function($http, $stateParams) {
return $http.get('/api/v1/rewards');
},
answers_data: function($http, $stateParams){
return $http.get('/api/v1/answers/current');
}
}
})
.state('home.game', {
url: 'game',
controller: 'GameController',
controllerAs: 'vm',
data: {
roles: ['player']
},
templateUrl: 'players/game/game.client.view.html'
});
}]);
And I put alert() in top of controller file is working and inside controller function is not working, I thought is not working since route can't detect the path
Any Sugesstion?
Update: I found actually problem, A real problem. if some state have resolve function it will be freeze ui. I don't know why because I never met before. I working with resolve many time only error form server will make resolve and ui will freeze. I ran "rails s -e production" is work normal but on real server not working
Related
I am currently working one a Vuejs PWA app (using Vue CLI 3). My app works fine on Android, Windows, and macOS, but it only shows a white blank page on ios. More specifically, when I use an iPhone and access my app with Safari or Chrome, it all shows a white page. When I add my app to the home screen of the iPhone, when I open it up, it still shows a white page.
this is link to my app.
White blank screen
I have tried many workarounds here but it not work.
here are some parts of my code:
vue.config.js
module.exports = {
transpileDependencies: ['vuetify'],
pwa: {
workboxPluginMode: 'InjectManifest',
workboxOptions: {
swSrc: 'src/config/firebase-messaging-sw.js',
exclude: [/\.map$/, /_redirects/],
},
manifestOptions: {
start_url: 'index.html',
},
name: 'AppName',
appleMobileWebAppCapable: 'yes',
},
};
router
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes: [
{
path: "/",
name: "RenterMainView",
component: RenterView,
children: [
{
path: "index.html",
name: "Home",
component: Home,
meta: { guest: true },
alias: ""
},
{
path: "detail/:typeId",
name: "HostelDetail",
component: HostelDetail,
meta: { guest: true }
}
]
}
]
});
router.beforeEach((to, from, next) => {
if (to.matched.some((record) => record.meta.requiresAuth)) {
if (window.$cookies.get('jwt') === null) {
// not logged in
next({
name: 'Login',
params: { nextUrl: to.path, preUrl: from.path },
});
} else {
// logged in
const role = window.$cookies.get('role');
if (to.matched.some((record) => record.meta.is_vendor)) {
if (role === 'vendors') {
next();
} else {
next(from.path);
}
} else if (to.matched.some((record) => record.meta.is_admin)) {
if (role === 'admins') {
next();
} else {
next(from.path);
}
} else if (to.matched.some((record) => record.meta.is_renter)) {
if (role === 'renters') {
next();
} else {
next(from.path);
}
} else {
next();
}
}
} else if (to.matched.some((record) => record.meta.guest)) {
// not require authen
next();
} else {
// not require authen
next();
}
});
Try changing the start_url
I found that on
Chrome Windows
Chrome MacOS
Android
I was OK to use quite a wide variety of start_url values, such as the "index.html" that you have, or "/index.html", etc.
However on iOS, I had to use
start_url: "."
The other values were fine on the other platforms, but gave a blank white screen on iOS.
Try creating a blank PWA with the Vue CLI
Does that work correctly on iOS?
Then step by step change it to contain your app.
Find out where it breaks.
That's how I found the start_url issue.
I hope that this could help someone. In this project, I make an PWA app using Vue, and I use Firebase Cloud Messagging to send notification from server to client. Unfortunaly, due to some restrictions on iOS, FCM doesn't work on it, that is why the application show a white page on iOS. So, the solution is to disable FCM on iOS
if (firebase.messaging.isSupported()) { // your code go here }
using above code to disable FCM on firebase service worker file
Is it possible to react on URL changes in a Vue component, without including VueRouter?
In case VueRouter is present, we can watch $route, however, my application does not rely on VueRouter.
export default {
watch: { '$route': route => console.log(window.location.href) }
}
Before I used vue router, I did something like this...
data: function() {
return {
route: window.location.hash,
page: 'home'
}
},
watch: {
route: function(){
this.page = window.location.hash.split("#/")[1];
}
}
I'm using Ember for the front end and I am doing basic testing to see if I can properly render my data before adding components. I have two resources 'Topics' and 'Ratings' and I have added both a route and a model hook for these resources. When I type http://localhost:4200/topics, I am able to see all of the topics being rendered on the template. However, when I type http://localhost:4200/ratings, I receive an error on the console saying:
ember.debug.js:32096TypeError: Cannot read property 'some' of undefined
at error (route.js:21)
at Object.triggerEvent (ember.debug.js:28580)
at Object.trigger (ember.debug.js:53473)
at Object.Transition.trigger (ember.debug.js:53287)
at ember.debug.js:53107
at tryCatch (ember.debug.js:53806)
at invokeCallback (ember.debug.js:53821)
at publish (ember.debug.js:53789)
at publishRejection (ember.debug.js:53724)
at ember.debug.js:32054
Which is strange because in my rails console, I am receiving a HTTP: 200 response. Is there some error within the code of my routes? I made sure to mirror ratings similar to topics. Or is this an association issue? Both a USER and a TOPIC have many ratings. I provided snippets of my code below:
Application Route:
import Ember from 'ember';
export default Ember.Route.extend({
auth: Ember.inject.service(),
flashMessages: Ember.inject.service(),
actions: {
signOut () {
this.get('auth').signOut()
.then(() => this.transitionTo('sign-in'))
.then(() => {
this.get('flashMessages').warning('You have been signed out.');
})
.catch(() => {
this.get('flashMessages')
.danger('There was a problem. Are you sure you\'re signed-in?');
});
this.store.unloadAll();
},
error (reason) {
let unauthorized = reason.errors.some((error) =>
error.status === '401'
);
if (unauthorized) {
this.get('flashMessages')
.danger('You must be authenticated to access this page.');
this.transitionTo('/sign-in');
} else {
this.get('flashMessages')
.danger('There was a problem. Please try again.');
}
return false;
},
},
});
Rating Model:
import Model from 'ember-data/model';
import attr from 'ember-data/attr';
import { belongsTo } from 'ember-data/relationships';
export default Model.extend({
score: attr('number'),
user: belongsTo('user'),
topic: belongsTo('topic')
});
Rating Route:
import Ember from 'ember';
export default Ember.Route.extend({
model(params) {
return this.get('store').findRecord('rating', params.id);
},
});
```
Ratings Route:
import Ember from 'ember';
export default Ember.Route.extend({
model() {
return this.get('store').findAll('rating');
},
});
Router:
import Ember from 'ember';
import config from './config/environment';
const Router = Ember.Router.extend({
location: config.locationType,
});
Router.map(function () {
this.route('sign-up');
this.route('sign-in');
this.route('change-password');
this.route('users');
this.route('topics');
this.route('topic', { path: '/topics/:id'});
this.route('ratings');
this.route('rating', { path: '/ratings/:id'});
// Custom route in topics controller that will call NYT API or generate random-show
//topic. This is a GET request essentially
this.route('random-show');
});
export default Router;
SOLVED! Read the DOCS, and used EXPLICIT INVERSNESS:
https://guides.emberjs.com/v2.5.0/models/relationships/
Apparently, Ember needs help understanding when you have multiple has Many or Belong to for the same type.
I currently have a mobile application where you can create issues, and view a list of issues others have created around your location.
The mobile app is is talking to a rails server and properly creating issues, and I have followed this guide covering Authentication with Rails & Devise.
In my controllers/app.js file, I have a local variable stored isLoggedIn that is set to false by default. When the application is loaded, I check to see whether the variable is true and if so, send the user to app.issues. Otherwise, the user is sent to app.auth.login.
$scope.$storage = $localStorage.$default({
isLoggedIn: false
});
$scope.$watch('$storage.isLoggedIn', function() {
if ($scope.$storage.isLoggedIn){
console.log('is logged in');
$state.go('app.issues');
}
else {
console.log('isnt logged in');
$state.go('app.auth.login');
}
});
Here is my root app.js file in my js folder.
angular.module('orangecone', ['ionic', 'orangecone.controllers', 'orangecone.services', 'ngCordova', 'ngStorage', 'ngResource'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
// org.apache.cordova.statusbar required
StatusBar.styleDefault();
}
});
})
.value('Constants', {
serverUrl: 'http://localhost:3000/'
})
.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
$httpProvider.defaults.withCredentials = true;
$stateProvider
// setup an abstract state for the tabs directive
.state('app', {
url: '/app',
abstract: true,
templateUrl: 'templates/tabs.html'
})
.state('app.issues', {
url: '/issues',
views: {
'app-issues': {
templateUrl: 'templates/issues.html',
controller: 'IssuesCtrl'
}
}
})
.state('app.issue', {
url: '/issues/:issueId',
views: {
'app-issues': {
templateUrl: 'templates/issue.html',
controller: 'IssueCtrl'
}
}
})
.state('app.auth', {
url: '/auth',
abstract: true,
templateUrl: 'templates/auth/tabs.html'
})
.state('app.auth.login', {
url: '/login',
views: {
'login': {
templateUrl: 'templates/auth/login.html',
controller: 'AuthCtrl'
}
}
})
.state('app.auth.register', {
url: '/register',
views: {
'register': {
templateUrl: 'templates/auth/register.html',
controller: 'AuthCtrl'
}
}
})
// if none of the above states are matched, use this as the fallback
$urlRouterProvider.otherwise('/app/auth/login');
});
I have a waning feeling that I am overlooking something rather trivial. The application always console.logs logged in even though the rails server is wiped and there are no users in the system at all. The application should be redirecting the user to app/auth/login but never does. Whenever I type this URL into the browser it also redirects me to the app/issues page.
Any thoughts or opinions would be greatly appreciated.
I'm using devise, rails with backbone. All my backbone routes are working just fine. But non-backbone routes like /accounts/login that are supposed to rendered by rails are being globbed with backbone router.
SS.Routers.ApplicationRouter = Backbone.Router.extend({
initialize: function() {
this.el = $("#content");
},
routes: {
"": "home"
},
"home": function () {
console.debug("Got home request");
var view = new SS.Views.Home();
this.el.empty().append(view.render());
}
});
The actual request/response to the /accounts/login is happening from rails logs. But Backbone home root gets triggered afterwards and my home page is rendered.
My layout has
$(function () {
SS.init();
});
from
window.SS = {
Models: {},
Collections: {},
Views: {Providers: {}},
Routers: {},
init: function (data) {
console.debug("Initializing Backbone Components");
new SS.Routers.ApplicationRouter();
new SS.Routers.ProvidersRouter();
if (!Backbone.history.started) {
Backbone.history.start();
Backbone.history.started = true;
};
}
};
Which is triggering my home route again.
"" route in backbone is not supposed to be globbing /accounts/login but it is.
A little bit of debugging is showing me that /accounts/login is being gobbled by "" since the fragment is an empty string.
And the fragment is an empty string in the all the cases where there is no match for backbone routes.
Code from backbone 0.9.2
loadUrl: function(fragmentOverride) {
var fragment = this.fragment = this.getFragment(fragmentOverride);
var matched = _.any(this.handlers, function(handler) {
if (handler.route.test(fragment)) {
console.debug(handler);
console.debug(fragment);
handler.callback(fragment);
return true;
}
});
return matched;
},
Any suggestions?
Add a class ('passThrough') or 'data-passThrough=true' attribute to the link. Catch this class/attribute in your router and return true so Backbone stops handling it and the browser treats it as a regular link.