default url
opend url in browser
I need to use my custom URL, such as：https://www.test.com:3000/recipe-app
Related
I am unable to rewrite the request url below is how my next.config looks
module.exports = withPlugins([
...
{
async rewrites() {
console.log("Rewrites called");
console.log(process.env.NEXT_PUBLIC_DOCS_URL)
return [
{
source: '/docs',
destination: process.env.NEXT_PUBLIC_DOCS_URL,
}
]
}
console logs are correctly printed with new urls but the component is not getting updated with correct links :
<Link href="/docs">
<Button className={NavbarClasses.button}>
<Box color={navWhite ? 'black' : 'white'}>Docs</Box>
</Button>
</Link>
The contents of .env file is as below:
NEXT_PUBLIC_DOCS_URL = http://localhost:4000/docs/intro
But the Link is rendered as localhost:3000 instead of localhost:4000.
Thanks.
According to the Next.js documentation:
Rewrites act as a URL proxy and mask the destination path, making it
appear the user hasn't changed their location on the site. In
contrast, redirects will reroute to a new page and show the URL
changes.
In the nutshell, when user opens your /docs page on localhost:3000 Next.js will send a request on his behalf to localhost:4000 and pass back response. From user's perspective, it looks like localhost:3000 is producing it.
If it's crucial for you to retain original URL, you should use redirects.
Redirects allow you to redirect an incoming request path to a
different destination path.
I am building a app with React and Electron and am using React Router Dom for navigation (I am using the HashRouter as it will not be on a server in production). I am trying to open a new electron window and display a page made with React in it but I cannot figure out how to access a react router route using the file protocol because each page does not get its own html file. Does anyone know how I can access that route using the file protocol?
My home page is loaded into the app using this which works for the "/" route:
mainWin.loadURL(
isDev
? 'http://localhost:3000'
: `file://${path.join(__dirname, '../build/index.html')}`
)
I am trying to load a page into a second window which should use the "/settings" route.
settingsWin.loadURL(
isDev
? 'http://localhost:3000/settings'
: `file://${path.join(__dirname, '../build/index.html/settings')}`
)
Here are the paths that I have tried to use but none of them load the page:
`file://${path.join(__dirname, '../build/index.html:settings')}`
`file://${path.join(__dirname, '../build/settings')}`
`file://${path.join(__dirname, '../build/index.html/settings')}`
The way to access a React Router route locally would be to add "#/[page-name]" at the end of the index.html path because the HashRouter looks at the URL hash (URL fragment). So now my code looks like this:
`file://${path.join(__dirname, '../build/index.html#/settings')}`
I want to host the react app and laravel app in the same laravel application project.
The front end app is react and backend(admin panel) laravel.
I want redirect all request to specific front end view except first URL segment == backend/:any
Eg.
http://host.com/backend/(any)
Continue with laravel router
http://host.com/(any) except backend/
Continue with react router
Any idea for that matter?
You have two options here, either pass a regular expression to the any route to ignore API prefixed routes
Route::get('/{any}', function () {
return view('index.blade.php');
})->where('any', '^(?!backend).*$');
Route::fallback(function () {
return view('index.blade.php');
});
From the docs
Fallback Routes
Using the Route::fallback method, you may define a route that will be executed when no other route matches the incoming request. Typically, unhandled requests will automatically render a "404" page via your application's exception handler. However, since you may define the fallback route within your routes/web.php file, all middleware in the web middleware group will apply to the route. You are free to add additional middleware to this route as needed:
Route::fallback(function () {
//
});
The fallback route should always be the last route registered by your application.
Try something like this in the "routes/web.php":
// WRITE BACK-END ROUTES AT FIRST
Route::group([
'prefix' => 'backend',
], function () {
Route::get('/', 'AdminController#dashboard')->name('dashboard');
Route::get('admin-page-1', 'AdminController#page1')->name('page1');
Route::get('admin-page-2', 'AdminController#page2')->name('page2');
// some other admin routes if you need
});
// FRONT ROUTE(S)
Route::get('/{text}', 'FrontController#front')->name('front');
Let's imagine i have a express server from where i can send react app file on browser request - app.js
fastify.route({
method: 'GET',
url: '/index.html',
handler: (req, res) => {
res.sendFile(app.js)
}
})
On client side i want browser to accept it as index.html with react inside.
import React from 'react'
import { render } from 'react-dom'
import App from './src/App'
// Where to place all html?
render(<App />, document.getElementById('someid'))
To put it simple, i want to get rid of index.html and generate it dynamically.
How can i do it?
Your react app is just a JavaScript bundle where as browser can only understand Html and execute js.
Browser parses HTML and creates DOM tree, during this process it fetches all the JavaScript in script tags. And React is not HTML.
So you have to send index.html for that matter any html file is must be sent to the browser first.
I build a website using angular js. But That is not a SPA. I use angular js for API calling and fetch some data only so now I want to do routing for custom URL of my HTML pages how will I do it ? I am serving my website using nodeJs. is there any configuration in node js to set custom URL of static website/routing.
For using the routes in nodejs you can use express.Router() module.It can be installed same as express and then you can define the routes on that.
For example :-
var adminRouter = express.Router();
adminRouter.get('/',function(req,res){
res.send('Here is the dashboard for my app');
});
adminRouter.get('/users',function(req,res){
res.send('Here is the menu to show all the users');
});
//Now to apply the routes to your app
app.use('/admin',adminRouter);
You can also route the middleware of your app and the url parameters separately