I have create a Polymer based Dashboard which I want to integrate with my Laravel site. My Dashboard is working fine but I have issues with routing in Polymer.
I want my Dashboard to reside at:
http://example.com/dashboard
I have set up my Laravel route as follows:
Route::get('dashboard',function(){
return View::make('polymer.dashboard');
});
and my dashboard urls should be like:
http://example.com/dashboard/#!/feedbacks
But, I am confused about what setting to make in app.js. Current app.js:
// Sets app default base URL
app.baseUrl = '/';
if (window.location.port === '') { // if production
// Uncomment app.baseURL below and
// set app.baseURL to '/your-pathname/' if running from folder in production
//app.baseUrl = '/dashboard/';
}
Under these settings, when I navigate to http://example.com/dashboard, when Polymer finishes loading, the url changes to http://example.com/.
If you haven't told the router to not use hashbangs then navigating to /dashboard won't work, it's expecting #!. You'll need to go into app/elements/routing.html and remove the line that says hashbangs: true. You'll also need to set the baseUrl to /dashboard/. Your server will also need to always return the index.html for any URL that starts with dashboard. So if the user tries to go to example.com/dashboard/feedback it should send down the index.html page again.
After you've made the change to routing.html, go into the devtools settings and enable Disable cache (with dev tools open). Then reload the app to make sure it isn't serving a cached version of the file.
Related
I'm using Vuepress 1.5. I was wondering if there is a way to redirect users back to the root path (/) if they navigate to a route that does not exist e.g. /some-unknow-path/new
The default setting for VuePress seems to be to display the 404 page, however, I would prefer to just redirect them to the root path
Turns out the way to do this is to add a default route into the `enhanceApp.js' file as shown below.
export default ({
Vue, // the version of Vue being used in the VuePress app
options, // the options for the root Vue instance
router, // the router instance for the app
siteData // site metadata
}) => {
// ...apply enhancements for the site.
router.addRoute({ path: '/*', redirect: '/' })
}
I have a React (CRA) + Node JS application already deployed locally (using the create-react-app build script), I've implemented Google OAuth signin with passportjs and cookieSession for persistence.
The login works fine but there is a strange bug when I Logout and then try to log in again with google OAuth, it just redirects me to a blank page.
This is how I make the request to my google oauth endpoint:
window.open('https://localhost:3000/auth/google', "_self")
That endpoint then is taken by my API:
app.get('/auth/google', passport.authenticate('google', { scope: ['profile', 'email'] }));
Doing some troubleshooting it seemed at first the culprit were the cookies because when I delete the site data before trying to login again... then the login works just fine.
However if I delete the cookies only (through the storage panel -> cookies -> delete all, in firefox) the bug still persists, it only disappears when I delete the site data entirely.
Moreover, The second time I try to login the request don't event reach my server.
What I've alredy tried:
Wrapping my login button inside an anchor tag and setting the anchor's tag href to the endpoint url.
Creating an anchor tag and assigning an href with the endpoint url and then clicking that new element programmatically.
None of this worked, the issue still persists.
Fresh firefox profile: this is even weird, the bug appears the very first time I try to login with google in a newly created profile. Again I have to first click the clear cookies and site data button for it to work.
Incognito mode: The issue persists, again the first time I login it works but the second time it redirects me to a blank page and the request is not even reaching my server.
What could be the problem here?
The issue was the service worker that cames with the creat-react-app template, however I didn't want to disable it completely as I want my app to be a PWA, so the next best thing was to disable the service-worker caching specifically for the page from which the user initiates the Google login (the page where the google button is).
For this I had to install the sw-precache package which allows you to modify the default service-worker that came with the create-react-app template (as you cannot directly modify it).
Then you have to create a config file at the root of your project and add these lines, in this case I call it sw-precache-config.js:
module.exports = {
runtimeCaching: [
{
urlPattern: /<the route to ignore>/,
handler: 'networkOnly'
}
]
};
and then in the build script from your package json:
"build": "react-scripts build && sw-precache --config=sw-precache-config.js"
For some reason adding subdomain route isn't working and keeps on returning my homepage instead of the page I need. I'm using Laravel, Inertiajs Vue in my app.
Here is my route:
Route::domain('webshopview.localhost:8000')->group(function () {
Route::get('/webshopview', function () {
return Inertia::render('Products/Index');
});
});
I want to be able to access it as webshopview.localhost:8000 but every time I try to visit this route it returns my app home page. If I do this in normal route like the below example, it works like a charm.
Route::get('/webshopview', function () {
return Inertia::render('Products/Index');
});
What is missing to create a subdomain for group of routes? Why it keeps returning the app homepage ignoring the subdomain
My app works locally on 'http://localhost:8000/' and 'http://127.0.0.1:8000/' and it works like that by default without me doing anything. So all I want is to add subdomain to specific routes so that I can access like this 'example.localhost:8000' or 'example.127.0.0.1:8000'. The end result is to have the route displayed like this after deployment 'https://www.subdomain.domain.com'
I even tried this and it didn't work:
Route::get('/productview', function () {
return 'First sub domain';
})->domain('productview.localhost');
now accessing 'http://productview.localhost/' returns 'This site can’t be reached' error.
I had to manually add the routes in my etc/hosts file on windows and restart the entire machine for it to take effect.
I am starting a new project, Nuxt.js for the frontend and Laravel for the backend.
How can I connect the two?
I have installed a new Nuxt project using create-nuxt-app, and a new laravel project.
As far as I have searched, I figured I need some kind of environment variables.
In my nuxt project, I have added the dotenv package and placed a new .env file in the root of the nuxt project.
And added CORS to my laravel project, as I have been getting an error.
The variables inside are indeed accessible from the project, and im using them
like this:
APP_NAME=TestProjectName
API_URL=http://127.0.0.1:8000
And accessing it like this:
process.env.APP_NAME etc'
To make HTTP calls, I am using the official Axios module of nuxt.js, and to test it i used it in one of the components that came by default.
The backend:
Route::get('/', function () {
return "Hello from Laravel API";
});
and from inside the component:
console.log(process.env.API_URL)//Gives 127.0.0.1:8000
//But this gives undefined
this.$axios.$get(process.env.API_URL).then((response) => {
console.log(response);
});
}
What am I doing wrong here?
I have tried to describe my setup and problem as best as I can. If I overlooked something, please tell me and I will update my question. Thanks.
Taking for granted that visiting https://127.0.0.1:8000/ in your browser you get the expected response, lets see what might be wrong in the front end:
First you should make sure that axios module is initialized correctly. Your nuxt.config.js file should include the following
//inclusion of module
modules: [
'#nuxtjs/axios',
<other modules>,
],
//configuration of module
axios: {
baseURL: process.env.API_URL,
},
Keep in mind that depending on the component's lifecycle, your axios request may be occurring in the client side (after server side rendering), where the address 127.0.0.1 might be invalid. I would suggest that you avoid using 127.0.0.1 or localhost when defining api_uris, and prefer using your local network ip for local testing.
After configuring the axios module as above, you can make requests in your components using just relative api uris:
this.$axios.$get('/').then(response => {
console.log(response)
}).catch(err => {
console.error(err)
})
While testing if this works it is very helpful to open your browser's dev tools > network tab and check the state of the request. If you still don't get the response, the odds are that you'll have more info either from the catch section, or the request status from the dev tools.
Keep us updated!
Nuxt has a routing file stucture to make it easy to set up server side rendering but also to help with maintainability too. This can cause Laravel and Nuxt to fight over the routing, you will need to configure this to get it working correctly.
I'd suggest you use Laravel-Nuxt as a lot of these small problems are solved for you.
https://github.com/cretueusebiu/laravel-nuxt
So i have an API created with Lumen with some documentation done with Apidoc outside of the public folder and i'd like to serve it when the user goes to the URL http://apidomain.com/docs
This is the structure of the app
ProjectRoot
->API
->Auth
->Docs
->v1
->app
->bootstrap
->database
->public
...
Is there any way to create a route that sends the user to API/Docs?
It's done, it was actually my bad, when trying to call the file via routes it actually messed up the filepath for the other files. So when i looked in the dev tools on chrome i noticed i was getting 404's on my js and css files, hence the failure to load the ApiDoc