My express application runs on the host, sometimes I see the syslog showing the following message:
log
but the application's router is:
router.get('/api/cart/products',PublicController.browse);
here is the application static path setting:
app.use(express.static(path.join(__dirname, 'public')));
i don't know why nginx is routing wrong path to public static directory.
Can anyone help me figure out what is the cause? thanks a lot?
It's hard to say without seeing more code or the structure of your folders. If you don't have the second line
app.use(express.static(path.join(__dirname, 'public')));
at the very end (it must come last after every other route) you will face issues. Have you made sure that this line of code comes after all your other routes?
I always thought that frontend should not be over bloated in size, usually by "frontend" I imagined a set of HTML, CSS and JS files, which are kind of small, especially when minified and compressed. So you can use whatever framework or library you love, your dev node_modules could be enormous in size, but after the compilation you get something lightweight to be served e.g by Nginx. Yeah, I just described an SPA-like setup, not an SSR when there's a server process running.
I had an experience building a website with NuxtJS, and it has only runtime logic, so no backend was required. I just did yarn generate and served all the resulted static with Nginx.
Now I'm building an application which requires a backend (it's a separate Python process), with dynamic pages like /users/john and /users/jane. Nuxt documentation says I can't use generate option anymore, cause such routing is dynamic. (technically I can write a set of fetch functions to load users from API during build time and generate corresponding pages, but it doesn't work well for runtime data). The only option is to use server target of NuxtJs.
There's even a page describing how to serve Nuxt application with Nginx. It assumes you should use yarn start command, which starts a Node process. It works fine, dynamic content is routed, caching is performed by Nginx, but.. it doesn't fit in a model that "frontend is lightweight". I use docker, and it means that now I need to bring huge node_modules with me. nuxt package itself is about 200 MB, which is kinda big for a small frontend app. I can run yarn install --production to save some space, but it still doesn't solve an issue that resulted image is huge.
Previously, when I wrote some apps in React, they resulted in a single index.html which I served by Nginx. It means, such dynamic routing was handled by frontend, using react-router or similar stuff.
To better understand my concerns, here's some rough comparison:
My old React apps: ~5 MB of disk space, 0 RAM, 0 CPU, routing is done by index.html file
My previous site with Nuxt static option: ~5 MB of disk space, 0 RAM, 0 CPU, routing is done by file system (/page1/index.html, /page2/index.html)
My current site with Nuxt server option: ~ 400 MB or even more disk space for a docker image, RAM, CPU, routing is done by Nuxt runtime
I don't really want to overcomplicate things. Allocating a lot of resources for a simple web app is too much, especially when you can solve the task with a help of a few static files.
The questions are:
Am I missing some option in NuxtJS to solve my issue?
Am I just misusing NuxtJS, and it's better to get plain VueJS, some vue-router, and develop the app as I described in "previously with react" section?
I think you are making a mistake here about SPA mode.
Assume that you have a page named users in your Nuxt pages, your folder structure is like this:
[pages]
[users]
[_name]
index.vue
When you requesting /users/john you can take the john from params and making an axios call to your server.
After that, you can use the nuxt generate command to create your dist folder and after that serve the dist folder with Nginx. Everything will work fine.
Check this simple routing approach in the browser
const routes = {
'/': Home,
'/users': Users
}
new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname
},
computed: {
ViewComponent () {
return routes[this.currentRoute] || NotFound
}
},
render (h) { return h(this.ViewComponent) }
})
In the Users component integrate with your python backend.
You can use SPA mode in NuxtJS (mode: 'spa', or ssr: false, in latest versions), then run yarn generate or nuxt generate, it will generate a full bundle in dist folder that can be served with any HTTP server.
This works fine with all dynamic routes, I tested it with simple php -S localhost:8000 that's just serves a folder via HTTP.
This works due to a trick with 200.html https://dev.to/adnanbabakan/deploy-a-single-page-application-with-200-html-2p0f
For my project it generated all needed data and folder size is just 13mb (with all images, fonts, etc...).
You can read more about how static routing is done in Nuxt docs: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
I installed fresh vue 3 app with cli, containing also vue router.
On my web I have put builded files into www/dist sub folder. Then in my php index file I linked all js/css files to /dist folder manually.
I have an image in component
<img class="discord-icon" src="#/assets/discord.png">
When I set publicHtml = '/dist' , everything works even image is shown, but for some reason my homepage gets redirected from original "www.page.com" to "www.page.com/dist"
I would like to have default "www.page.com" at homepage but also with working image, how can I achieve that ?
Edit :
My router config (default from Manual cli install with router)
const routes = [
{
path: "/",
name: "Home",
component: Home
}
]
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});
UPDATE :
On vue discord I got adviced to create .htaccess for this, sadly I am not skilled enough to create one, or even know to which folder store it. Also I had another one already in there since I am using php framework (Nette)
This is how I got it working for now :
"publicPath: '/dist'" and "history:
createWebHistory(process.env.BASE_URL)" where project is in "/dist"
folder, so page goes www.page.com/dist. All work but. I go to
"www.page.com" it redirects to "/dist" but when look in html it does
not generate "/dist/css/chunk-vendors.css" so all imported css is
missing. But when I hit refresh (going directly to www.page.com/dist)
chunk-vendors.css is loaded. By default vendors.css is not in
generated index.html so I guess its done by js. So i got evil thought
of just paste that vendors.css link manually to my production
index.html aand it works, althought when going to /dist url directly I
end up with loading this style 2 times lol. Then I got even more evil
thought and changed to 'history: createWebHistory("/")' , rebuilded
for production and now i have nice www.page.com and even all imported
styles are working (with that style link pasted in manually), just
have some feeling I will burn in hell.
Here is a little summary of how a vue-cli project usually gets built and pushed to a server. and what kind of config is important and what 's their purpose. hope it gives you an idea of how to setup your project.
Building with Vue Cli
This is how it works in a regular project to build with vue-cli:
vue.config.js
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/final-sub-folder' : '',
// ...
}
The above config sets a different site URL for dev and prod. The prod /final-sub-folder means that on the final URL in your distant server this sub-folder will be present (E.g. https://example.com/final-sub-folder).
when building with Vue Cli npm run build the output goes into /dist folder (by default) and the build is set for prod by default (so process.env.NODE_ENV = 'production').
Now, if you try to go in that dist folder in your localhost (on Apache for instance), the vue-router using the same publicPath will fail because on your localhost your-proj/dist is a different base URL than /final-sub-folder as set in the config. So it will only work in the final server where the base url can be matched.
Setting up vue-router
Your vue-router should always be set to (this config is for vue-router#next - for Vue 3):
const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
})
So that it follows the base URL you set in a single place, in your vue config.
(notes: the createWebHistory removes the # in the URLs)
Adding a .htaccess
Regarding the .htaccess, it is a common practice to set up redirections in it so that on your final server, accessing https://example.com/final-sub-folder/a-sub-page directly will be redirected to your index.html that can load the vue-router which will handle the route matching of what you entered in the URL.
https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations
Without this .htaccess, the Vue router cannot be reached from a sub-folder since it does not exist on the server (it's a virtual route using rewriting engine), it would result in a not found URL.
Here is a simple example of .htaccess:
Options +FollowSymlinks
Options -Indexes
RewriteEngine On
RewriteRule \.(js|css|map|jpe?g|svg|gif|png|eot|ttf|woff2?)(\?.*)?$ - [NC,QSA,L]
RewriteRule .* index.html [NC,QSA,L]
What is important in that is the last line redirecting anything to index.html (which is generated from your vue-cli build).
The previous line allows any asset file to not be redirected (no asset file should be handled by vue-router).
Hope it helps you understand! ;)
I was looking into how to use socket.io with Nuxt and came across this: https://github.com/nuxt/nuxt.js/tree/master/examples/with-sockets
Can someone explain why the io module is creating a socketio server? All the socketio configuration is also being done in server.js already so isn’t that part of the io module redundant?
There are two different approaches. The server.js is an example of using Nuxt programmatically with WebSockets together. When using nuxt.config.js with the io module, it works "standalone".
Quoted from me here
The description also available in the dev branch (here)
When i run the package from IP that is generated by php artisan serve command, its run easily. It I another icon of the site then it can not find valid route. As example some images is attached.
http://localhost/ecomerce/public/list.
After clicking the image the valid url does not show and return error like this image
and URL is "http://localhost/detail/4/Demo_selection_article/1" that is my problem.
If I rewrite the URL as http://localhost/ecomerce/public/detail/4/Demo_selection_article/1 then work well.
The package I use that link is https://github.com/aimeos/aimeos-laravel.
How can I solve this problem? Pleas help me.
The Laravel router expects that ./public/ is your document root, so your problem isn't related to Aimeos if I'm correct but is a common Laravel problem.