In node.js with express all the static content is placed in /public folder. Can someone help me understand why do we need to place it particularly in public folder? What if I want to create a folder called 'static' with in 'views' folder and keep all images, styles and script files in it. Because I want keep all thing related to views under one folder. If it is not good way of structuring project please help me in understanding reasons behind it.
You can put your content in any folder you want on the server. All that matters is how you set up your Express routes to serve that public content. You can name the local server folder /public or /static or whatever you want and you can put it anywhere in your folder hierarchy that you want too (like in some project directory). You will just need to set the path in your express.static() middleware to match where you put the content on your server so express knows where to look for it to match a given incoming request.
Related
There is a stack that uses Next.js as the main dependency. Each page is an independent application. An index page uses www.domain.com/_next/*.js so its base path configured as a / root. Also, another application has a base path same as the homepage but a little difference which is using a query string in the URL.
if the URL is www.domain.com/ then it is a homepage, if the URL is www.domain.com?key=value it means it is a different page and the request will be redirected to the associated application by the Nginx and Load Balancers. So, the problem is:
the main page is serving its statics under the www.domain.com/_next/*.js
the page that parses query strings is serving its statics under the same location same as MainPage www.domain.com/_next/*.js
These applications have different statics created by different pipelines also there is a cache mechanism. Is there a way to solve that conflict just by making some configuration in Next.js?
You can use the basePath settings introduced in Next.js 9.5 (https://nextjs.org/docs/api-reference/next.config.js/basepath)
But your .next/ folder would be changed, something like yourdomain.com/yourbasepath/_next
If you want to change only the .next/ folder location assetPrefix can be used. I think you can take a look at assetPrefix https://github.com/vercel/next.js/issues/5602#issuecomment-673382891
Or we can setup the custom server, for example the Express and custom the base asset path via Express (https://expressjs.com/en/starter/static-files.html)
app.use('/static', express.static('public'))
P/s: The asker choose the assetPrefix solution
I am new to nodejs/express/coding in general so my apologies if this isn't extremely clear. I am doing a code challenge for a job.
I have most of the project done. Part of the challenge is to have it uploaded to a bucket on S3. I created a bucket, that is all done. My problem is there needs to be a index.html in the root folder of the bucket (I think). All of my html pages (three of them) sit inside of the views directory. When I try to put my index.html in the root folder on cloud9, it says index.html can't be found in the views directory (obviously, since I moved it out). Can I set the views directory to be in the root folder?
Is there a way with express/nodeJS to have all of the files in the root folder? Or is there a way to keep my views folder as it is in Cloud9 and have everything run like it does from there, except in S3? I must be missing something. I am completely lost as to how to host this app on S3. Posting on here was my last resort! Thanks for any help.
Let's make order. Amazon S3 is a cloud file storage service. It can also be used to host static assets of a website.
From what I understand, you are building something with express, using the view directory, used in general for templates and so, I suppose, you are rendering your html pages by your express application. This is called server side rendering and is fully incompatible with amazon s3 that can only serve files.
Now, how can you resolve the problem (considering that you are obliged to use s3)? It depends.
If you are using express only to render your application and to serve static assets (so no API), you should consider some refactoring: in such case, you are basically building a web application without APIs. You don't need express. Maybe you are searching for a client side framework like Vue.js, React or Angular. To be more general, you should render your application client side.
If your express server is also acting as api server, you should divide your project. From one side you have your express api server, deployed somewhere. From the other side, you have your web app, client side rendered.
There is another solution: you could use a prerender like this to generate static assets from your express application. But if you are new to web developement, I advise you not to evaluate this option
When you move your static files to S3, you will need to setup the relative paths accordingly.
Can I set the views directory to be in the root folder?
No. Instead organize your files in S3 where index.html is the root and files with paths such as js/ css/ images/ taken from the root folder.
Note: Its important to understand that you cannot run NodeJS in S3 and instead you will be using the internal web hosting from S3 to serve the static content.
There might be an answer to this, but I don't know how to phrase it properly, so I'll just ask.
I use a module, called build-url. It is designed for the browser and provides an easy way to construct URLs with query parameters.
I want to store my website in a folder, called site while not having to type it in the URL. I managed to do that easily. However, when the client asks for the build-url.js file, he receives a 404.
Here's how the folder structure looks like:
node_modules
build-url
dist
build-url.js
site
index.html
In my code, I have:
app.use("/", express.static(__dirname + "/site"));
The problem
When I go to http://localhost:5000/, the index.html file is served and everything is fine. Inside, I include the script:
<script src="../node_modules/build-url/dist/build-url.js"></script>
However, in the browser console, I see:
GET http://localhost:5000/node_modules/build-url/dist/build-url.js 404 (Not Found)
The server looks for a node_modules folder inside the site folder, instead of going up the directory tree. How do I fix that?
It is not a very good idea to allow your web server to send files from outside of the specified folder because it will allow the bad guys to download anything from your server including your confidential data.
You can copy required file to static folder or you can setup gulp or any other automation tool to do it automatically.
Most of the URL links (css, images, js files etc) in my project are absolute, but these don't work on my server.
I've located the project on my server in a subfolder, so it is going to the root.
How can I change this so the url like /images/background.jpg is going to 123.12.34.56/projectfolder/images/background.jpg instead of 123.12.34.56/images/background.jpg?
I guess it has something to do with Apache config, but I couldn't find it yet...
I'm using Laravel, so maybe there are some laraways to fix this.
Try to take the path url from the root.
If you are using PHP you can use getcwd() function and save it in a variable path root and keep all your URL as relative paths not the absolute paths.
Hope this helps.
what i usually do is create a sub domain (cdn.example.com) and point it to a directory called assets which is in the same level as the public directory. All my js, images, css are in there.
Then in the app.config add a new key value pair 'cdn' => 'http://cdn.example.com'. When i'm adding css or js files i'm using it like this.
<script src="<?php echo Config::get('app.cdn') ?>/js/jquery/1.7.1/jquery.min.js"></script>
Why do this? say if i decide to move my assets to a caching server i can easily do so by moving just the cdn.example.com
I have a mounted app that taking requests on the /myapp/ path. Now I want to serve static content.
The path has to be absolute in the context of my mounted app, but relative to the path of the mount itself.
So, for example, I want the pages on /myapp/something/ and /myapp/asd/somethingelse to all load images, CSS and whatnot from /myapp/. The files themselves are in the public folder with routing setup for serving static content.
The problem is that I can't put relative paths in my base layout template because if the request path is /myapp/asd/somethingelse the browser will look for /myapp/asd/mystaticcontent.css and I can't use absolute paths because the path to myapp might change which would require manual modification every time I move it.
What I basically need is a way to get that prefix that express hides from the mounted app AND NOTHING ELSE.
There's request.originalUrl but that also contains the path that myapp is matching on. I don't know how to reliably strip the request.url from request.originalUrl and it does seem kind of a roundabout way of doing it.
If I had that base URL of my mounted app, I could pass it to the template and then generate an absolute path on the spot.
Edit:
app.path() might be what I want but this isn't documented.