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
Related
I would like to server-side render only a specific route in React. For example, /home should be client-side rendered, but /post should be server-side rendered.
The /post route receives a post ID as a parameter(using react-router) and fetches the content from a database server.
Is their any way I can server-side render only a specific page/route using react-dom server?
Your data should be handled by the middleware and stored there to minimize api calls. The Front end should render based on that data.
One good approach is to use built version of your react within express.js server. So let's say you have your built version of your react inside build directory :
var express = require('express');
var app = express();
app.use("/post",function(req,res) {
console.log(req); // Do your stuff for post route
});
app.use("/",express.static(path.join(__dirname,"/build")));
app.use("/*",express.static(path.join(__dirname,"/build"))); // Handle react-router
const httpServer = require("http").createServer(app);
httpServer.listen(8080, function(){
console.log("Server is running on 8080");
});
How do I set the routes for my React Single page application in Express js
Navigate a React App link from a single page application to Express server dynamically
Your question is not completely clear but I'm assuming you want to know how to use express for API routes and still server react on the frontend. If this is the case you can do it like this on your backend file (let's call it server.js). And the react app is in a folder called "client":
const app = express();
// API routes
app.get("/api/test", (req, res) => {
res.send('example response from backend');
});
// If no API routes are hit, send the React app
app.use(function (req: Request, res: Response) {
res.sendFile(join(__dirname, "./client/build/index.html"));
});
Note that you have to send the React app last. This line must come after all other routes.
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');
I am using angular on the front end and express js MongoDB on the backend, in server.js file of express application I am listening on port 3000
var server = app.listen(3000, function () {
console.log('Server listening at http://' + server.address().address + ':' + server.address().port);
});
What I want is when I hit localhost:3000 my HTML page in angular js application should get render, which I achieved using
app.get('/', function (req, res) {
res.sendfile(__dirname + '/app/userlogin/userlogin.html');
});
When I hit localhost:3000 my HTML page is getting render but it is not including bootstrap files I am getting error 404 for scripts and links which I am adding in head tag but intelligence of vs2015 providing those bootstrap script files when I am trying to add them in my HTML, Following is my project structure and I have placed my bootstrap js and CSS files respectively in app -> js and app -> CSS
You need a public_static folder containing all your frontend code.
The express app should serve it with express.static('')
server.js
app.use(express.static('public_static'));
Directory Structure
-- server.js
-- public_static
-- index.html ( Rename your userlogin.html )
-- css
-- JS ( Angular files )
--- controllers
--- directives
--- services