I am looking for a local server configuration that will correctly serve single page applications that utilize push state. This server configuration needs to serve the single page(index.html) for all configured routes but serve assets based on url requested. The Backbone router in the single page will handle customization based on the url.
url: /
serves: /index.html
url: /any/configured/path
serves: /index.html
You can use any server but I prefer one for development work that has a simple setup/install such as:
Python's SimpleHttpServer
connect (npm package)
Related
The problem I'm trying to solve: there is a public part that requires ssr for seo. But there is also an application where seo is not needed and for it to be spa.
I have no experience with next js. So the question is, is it possible to "embed" a spa application in next js.
I will be happy to get any information
react-router-dom does not work with next js because of the hydration process
I would keep the two apps separate since they have different architectures, and it will be simpler that way. Sounds like your SPA may also be secured, which is why it does not need SEO.
A good technique can be be to build both apps to static content, then achieve public URLs like this:
https://www.example.com
https://www.example.com/public
Both built apps could potentially be deployed to a content delivery network. Another common option is to use a reverse proxy such as NGINX or Kong. This configuration uses NGINX to serve the SPA's static content, then routes requests to the Next.js app to a Docker container:
server {
server_name reverseproxy;
listen ssl 443;
location / {
root /usr/share/nginx/html;
index index.html;
}
location /public {
proxy_pass https://nextjsapp:3000/;
}
}
Is there a way to change the endpoint that static JS files get served up from in Bokeh?
I have a number of bokeh dashboards that are accessed from behind a load balancer
Any request to https://myloadbalancer/{dashboard_name} is sent to the load balancer
The loadbalancer then routes the requests to the correct dashboard server based on the value of /{dashboard_name}
For any given dashboard, bokeh then attempts to access static javascript via https://myloadbalancer/static
For this to work, I need to create a new bokeh server just to serve up static files and then configure the loadbalancer to route requests to https://myloadbalancer/static to the new server
This approach is fine, until you start getting different javascript dependencies in the different dashboards
Does anyone know of a way to change the /static path of a bokeh dashboard. So that for example it reads static files from https://myloadbalancer/{dashboard_name}/static?
You can run your bokeh serve command with the option --prefix <base_path>. This will put <base_path> behind every resource requested to the Bokeh (Torando) web server, this applies also for /static resources.
Here you can find the official Bokeh documentation page.
Kind regards
I head to create Nuxt SPA with routing and mb API in future like that:
Backend server (on express or smth else) listen and on request give entire SPA to client.
Now user can use everything on client side (include routing) with no more else requests to backend (mb API requests only)
It means that server should give some .html file with js and css files as SPA and it will work on client side.
I tried to run some commands like nuxt build and nuxt generate
It looks like they return a same result - js files couldn't be found
And index.html file doesn't work properly
After some researching I found a solution
But now I got this:
It can't open the fourth js file in another js file. Path isn't right!
Every time I tried to run it as a static html file and from localhost (and also with using Live Server)
I think I did a lot of crutches and there should be another built-in function or feature that allows us to do what I want
I wrote a lot - if I made a mistake or you didn't get smth - please, ask! I need any help
To test your locally built application, you need to serve all files within the generated /dist folder. You can setup very easily a local web server using Express/Node.js as you already have Node.js installed when running Nuxt. Create a new folder and install express via npm (run npm install express).
Then, copy everything from /dist into /public and create a file server.js:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/public'));
app.listen(3000);
Run the web server with node server.js and you can access your generated files on http://localhost:3000.
I was using react router for one of my projects, so react is frontend library and routes are managed by react router and backend views are in django and apis in django rest
So i was going through the react-router documentation and I came across this:-
Configuring Your Server
Your server must be ready to handle real URLs. When the app first loads at / it will probably work, but as the user navigates around and then hits refresh at /accounts/23 your web server will get a request to /accounts/23. You will need it to handle that URL and include your JavaScript application in the response.**
I was wondering how would this work with django views.
On the development server, you simply set up a route for everything that doesn't start with api/ or static/ to return your basic app.html file. Example
class AppHTMLView(View):
def get(self, request):
fn = os.path.join(settings.BASE_DIR, "app", "app.html")
with open(fn, 'r') as fh:
return HttpResponse(fh.read())
And on your production server, you configure Nginx accordingly. Something like this
...
location / {
root /var/www/example.com/static_files/;
try_files '' /app.html =404;
}
But that's not in any way specific to React, but common to all single page apps.
I have a project that is already deep in development, and there is a problem with the ports.
The Client is SPA written in backbone, that uses Sails as a server.
Problem is in the fact that Client is running in Express on port 80, while Sails is run on 1337.
I would like to host this backbone application within the Sails, not ouside the sails.
A bit more details:
When I fire the Fiddler, I am seeing requests being made to localhost:1337/get/user.
I need it to reside on port 80 as well.
Backbone is written using standard. I have app.js and main.js with all of the common folders (JS, LIBS, CSS). In other words, I have index.html that has data-main using require.js...
I have not problems running the client in separate node.js... how to run it within Sails.js?
Where do I put my index.html???
Trying to serve index.html as a static file won't work. Instead, try the following:
1. Serve your index.html from Sails
Just serve index.html as a combination of views/layout.ejs and views/home/index.ejs, which are mounted to the root / for default newly created Sails project.
2. Set up a catch-all route
In config/routes.js put something like this:
module.exports.routes = {
'/': {
view: 'home/index'
},
'/:unknownRoute': {
view: 'home/index'
}
}
This way you'll be able, for example, to use simple one-level pushstate routing within your SPA: routes like /products or /news will still give you your index.html (if you are using something more complex though, you may want to play a little bit more with your Sails routes).
3. Serve your API with a prefix
In your config/controllers.js put, for example:
module.exports.controllers = {
...
prefix: '/api',
...
}
This will let you serve your API with a prefix and have both /api/products (JSON API) and /products (your SPA) routes available.
4. Use any port you want
You can change the default port via config/local.js, even to 80 (if you don't have anything else running on 80, of course).
In production though, it would probably be a better idea to just proxy to default Sails' or any other port with Nginx, for example.