Only root route works. /about, /home shows "Cannot GET /home" in browser. If i replace each route path with "/" then the corresponding component is rendering. But there seems to be problem when i try to render certain route eg /home.
You have to configure your server to work with Router.HistoryLocation -- that is, it needs to always serve your index.html page regardless of the route.
app.get('*', function (req, res) {
res.render('index');
});
Check out the docs here: React Router Docs - HistoryLocation
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: '/' })
}
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
I am creating a SPA using Vue js and it kind of works but I have one problem. With history mode enabled on Vue I can enter urls and go to that page using the Vue Router but when I try to login I get the literal page html. I know I can do something like auth\{vue?} but I would prefer if i didn't have to do that. I want to be able to always keep the url with no prefixes unless it is to an API request. So for example:
I have the root view:
Route::get('/{vue?}', function () {
return view('layouts.app');
})->where('vue', '[\/\w\.-]*');
and then I have the api requests:
Route::group(['prefix' => 'api'], function () {
Route::post('/login', 'Auth\\LoginController#login');
Route::post('/register', 'Auth\\RegisterController#register');
Route::get('/logout', 'Auth\\LoginController#logout');
});
but when I hit /api/login I get the return view data from /{vue?}.
I hope that makes sense and if so any help would be amazing, Thanks.
it is clearly explained here: https://kjamesy.london/work/laravel-53-vuejs-20-make-vuerouters-history-mode-play-nicely-with-laravels-routes
Short story: declare history mode to false in VueRouter and then on the Laravel side, whenever the $request->ajax() is false, the same route will always capture the request. So, we can safely define a catch-all route to redirect such traffic to the index() method of our resource controller:
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.