In next.js that uses php-like approach - files in pages folder became url paths. Like /pages/reader.js will be loaded by url http://localhost/reader.
Problem is that i can't undersand how to use non-english url path in next.js?
Codesandbox example. (Update page to load from server)
Url example:
http://localhost/читатель
That changes internally by chrome to:
http://localhost/%D1%87%D0%B8%D1%82%D0%B0%D1%82%D0%B5%D0%BB%D1%8C
In next.js pages folder file named:
pages/читатель.tsx // not working
pages/%D1%87%D0%B8%D1%82%D0%B0%D1%82%D0%B5%D0%BB%D1%8C.tsx //working but i can't name files like that, i will not find what i need later.
Maybe php users resolved this somehow ;)
try to use encodeURI() of core javascript which can convert the specific characters to the required url form
const url=encodeURI('читатель.tsx');
console.log(url);//%D1%87%D0%B8%D1%82%D0%B0%D1%82%D0%B5%D0%BB%D1%8C.tsx
Then we can use this path to navigate
Related
I'm having hard time understanding how to embed SPA (single page application) files with rust-embed and axum.
I have no trouble without rust-embed using a single line of code with axum (from here):
app.fallback(get_service(ServeDir::new("./app/static")).handle_error(error_handler))
It works because all files are correctly downloaded. But:
FIRST PROBLEM
What is missing for a properly SPA handling is the redirect on the index.html if for example the user reloads the page on a SPA nested route.
Example: I'm on the page: /home/customers which is not a file nor a dir but just a fake javascript route and if I reload the page axum gives me 404 (Not found).
SECOND PROBLEM
I need to embed those files in my final executable. In Golang this is "native" using embed: directive.
I saw that in Rust this is well done with rust-embed but I cannot complete my task for SPA.
The need is that every path typed by the user (and that is not an existent file such as .js or .css which obviously must be downloaded by the browser) leads to the "index.html" file in the root of my static dir.
If I use the example axum code I can see the route:
.route("/dist/*file", static_handler.into_service())
which has /dist/*file and I don't need that /dist because the index.html calls many files with custom paths, such as /_works, menu, images.
If I remove the dist part I get this error:
thread 'main' panicked at 'Invalid route: insertion failed due to conflict with previously registered route: /index.html'
Can you help me understand how to properly accomplish this task?
Thanks.
I had a similar issue, building with Vue and Axum/Rust.
Here's how I solved Problem one
Install the tower_http crate
use axum::routing::get_service to serve the build SPA.
//example implementation
...
//static file mounting
let assets_dir = PathBuf::from(env!("CARGO_MANIFEST_DIR")).join("views");
let static_files_service = get_service(
ServeDir::new(assets_dir).append_index_html_on_directories(true),
)
.handle_error(|error: std::io::Error| async move {
(
StatusCode::INTERNAL_SERVER_ERROR,
format!("Unhandled internal error: {}", error),
)
});
...
Mount the static file rendering
//mount the app routes and middleware
let app = Router::new()
.fallback(static_files_service)
.nest("/api/v1/", routes::root::router())
.layer(cors)
.layer(TraceLayer::new_for_http())
.layer(Extension(database));
Check out the full source code here. Another thing is, Axum seems to have breaking changes in subsequent versions as I found out here, so you might need to check the doc/example that corresponds to the version of Axum you are using :)
I want to make a main URL and that URL will be the main route for all my Django apps.
Suppose I have 3 apps: blog, linux and business. I want to make URLs like this:
127.0.0.1:8000/blog/ (when i will click blog menu)
127.0.0.1:8000/blog/linux ( when i will click linux menu)
127.0.0.1:8000/blog/business (when i will click business menu)
The blog app will be my index home page and all the apps' links will be like this. I don't want to import all of the views and models in the blog app. The project's structure will be the same and I don't want to change it.
All I want is to make blog common for all the apps. If I click a post on a linux page, the URL will be like this:
127.0.0.1:8000/blog/linux/post name
How can I do this?
This is my project's structure:
[]
You can write all the URLs into the urls.py in your project folder or you can make a urls.py in your apps folder. Maybe read this
After Creating the App in django project by following procedure in https://docs.djangoproject.com/en/3.0/intro/tutorial01/
App Folder (blog app folder, found inside project folder)
Add these urls
127.0.0.1:8000/blog/linux
127.0.0.1:8000/blog/business
to the app/urls.py file above the admin.site url path
Project Folder:
Configure the urls.py file in the project folder by adding the 127.0.0.1:8000/blog/ url above the admin.site url path. This configuration is done to load this url when the server starts running.
The django checks for the requested url pattern and will route the first discovered url.
The django cannot identify duplicate url.
I am setting up a Node.JS application using express, and I want domain.tld/hey to serve the public/index/index.html folder on the server (also containing other files such as .css or .js files).
However, I DO NOT want domain.tld/hey/ to work (the / at the end is a problem for me) and in this case, I want to display a custom error page located at public/error/index.html on the server.
Finally, when accessing domain.tld or domain.tld/, I want to display a custom homepage located at public/home/index.html on the server.
To summerize:
domain.tld or domain.tld/ serves public/home/index.html
domain.tld/something serves public/index/index.html
domain.tld/something/ or domain.tld/some/thing serves public/error/index.html
I already tried using express.static('folder', { redirect: false }) but it doesn't display the index.html file and I can't get the other things to work.
I really don't know how to do it!
I fortunately don't have any code to show you guys as this is more a theorical problem, since I am beggining with expressjs.
Thank you very much in advance for your answers, and please don't hesistate to ask for more details if you need some!
I would like to use the swagger-ui dist 'as-is'...well almost as-is.
Pulled down the latest release from github (2.0.24) and stuck it in a folder in my app. I then server it out statically with express:
app.use('/swagger', express.static('./node_modules/swagger-ui/dist'));
That works as expected when I go to:
https://mydomain.com/swagger
However I want to populate the url field to my swagger json dynamically. IE I may deploy to different domains:
https://mydomain.com/api-docs
https://otherdomain.com/api-docs
And when I visit:
https://mydomain.com/swagger
https://otherdomain.com/swagger
I would like to dynamically set the url.
Is that possible?
Assuming the /api-docs (or swagger.json) are always on the same path, and only the domain changes, you can set the url parameter of the SwaggerUi object to "/path/to/api-docs" or "/path/to/swagger.json"instead of a full URL. That would make the UI load that path as relative to the domain the UI is hosted on.
For reference, I'm leaving the original answer as well, as it may prove useful in some cases.
You can use the url parameter to set the URL the UI should load.
That is, if you're hosting it under https://mydomain.com/swagger you can use https://mydomain.com/swagger?url=https://mydomain.com/api-docs and https://mydomain.com/swagger?https://otherdomain.com/api-docs to point at the different locations.
However, as far as I know, this functionality is only available at the current alpha version (which should be stable enough) and not with 2.0.24 that you use (though it's worth testing).
Another method would be to use the swagger-ui middleware located in the swagger-tool.
let swaggerUi = require('../node_modules/swagger-tools/middleware/swagger-ui');
app.use(swaggerUi(config.swagger));
The variable config.swagger contains the swagger.yaml or swagger.json. I have in my setting
let config = {
appRoot: __dirname,
swagger: require('./api/swagger/swagger.js')
};
Note: I am using the require('swagger-express-mw') module
You could try with this on index.html file of the swagger-ui... It works for me.
if (url && url.length > 1) {
url = decodeURIComponent(url[1]);
} else {
url = window.location.origin + "/path/to/swagger.json";
}
i have set the static web directory for use in my nodejs app:
app.use express.static(process.cwd(), 'www')
This brings up all the static files like css, images etc, when im in the root it works
http://localhost:8124/
however if i go to somewhere like /tags, it deosnt bring up the static files:
http://localhost:8124/tags/
i get 404 error on the console because its trying to access the www folder
with
/tags/www/ ....
im not sure how to solve this problem, thanks
It looks like you're referring to static assets, without leading /, this results in appending relative asset address to the current URL. Instead refer to your static assets with leading /
eg. /www/style.css rather than www/style.css