This question already has answers here:
Next.js: How to make links work with exported sites when hosted on AWS Cloudfront?
(3 answers)
Closed 10 months ago.
hoping a Next.js magician could help me with this, or at least just tell me flat out if it isn't possible.
We have a site which is compiled down into static files. These will be served from S3.
When I run next export, everything builds correctly, but I had hoped to be able to directly access subpages without adding the .html extension. I assumed (wrongly) that next built pages into directories, and dropped an index.html into that directory.
The setup on the dev side is fairly simple. Each component has a directory, eg "some-component", with an index.js which exports the named component from an adjacent file like "some-component.js".
This all works if I start at the site root - I can navigate to, eg, /components/some-component without worrying about the extension.
Next has created a some-component directory, but the file inside that is still just called some-component.html. So if I hit that url from the browser, it obviously 404s.
Is there any way to get next to spit out index.html's into the directories, so browsing directly to the directory (try saying that after a drink) works? Or am I barking up the wrong tree?
I know there are other solutions to this, particularly for s3, but figured it was worth asking about.
Cheers!
Next.js has a trailingSlash setting that should work for you:
// next.config.js
module.exports = {
trailingSlash: true,
}
When this setting is true, and using something like ./pages/products/shoes.jsx as an example, a directory named after the .jsx file (shoes) is created and that .jsx file then becomes an index.html file inside that directory, i.e., href="/products/shoes/". Your server will send that path's index.html (or can be configured to if it doesn't already) even when index.html isn't specified in the href.
Related
I have a Discord bot I'm maintaining since a year, and a couple of months ago I changed a bit the file structure to clean it up and make it easier for me to know what's going on.
The thing is, whenever I try to request a file (with require) that is in a folder located in the bot's root directory, sometimes it works with "./" and other times it works with "../"
The current file structure is:
----commands
-------commands.js(multiple files)
----images
-------halloween
----------images.png/jpg(multiple images)
----logs
-------bot.log
----modules
------logger.js
----settings
-------config.json
-emojis.json
-gifs.json
-index.js
Following the structure above, when for example I try to request one of the halloween images in a command, the logical thing to me would be to use "../images/halloween/image.png", but instead I have to use "./images/halloween/image.png" as if the "images" folder is within the "commands" folder
In one of the commands I have to use:
const logs = require("../modules/logger");
const background = await Canvas.loadImage("./images/halloween/background.jpg");
I would like to know why this happens. It really messes with my brain seeing an error saying that a file was not found only because node.js decided that this time the parent directory is "./" instead of "../"
Assuming your commands file is making file system calls (because you're accessing an image from it), the directory you invoke your script from can matter. Make sure you're using the path utility to resolve your file locations. See NodeJS accessing file with relative path for more details.
I understand the difference between renderer.js and main.js in Electron, but what I don't understand is why Electron suggests the existence of a renderer.js file in the first place. In truth, renderer.js is just a JS file being included in the app's index.html....it would be no different if you called it index.js. It even says in their examples "include as many other scripts here as you wish." So it's actually just the same as a normal web page....you just include JS, and the file called renderer.js isn't strictly necessary nor any different from any other included JS.
Do I have this right?
I have been using Electron for a few years now and I have never, ever used a "renderer.js" file. I tend to use "app.js" or something more specific to the app but it is just habit.
It doesn't matter what the files are named - you could call "main.js" anything - "late-for-dinner.js" and so long as you reference it as the entry point in your package.json all will be well. Same for "renderer.js"
I would guess that the names "main.js" and "renderer.js" were picked to illustrate the separate domains, not because they are in any way "required",
I have a components directory which hosts several sub folders with actual components. Each folder has main file named as the name of folder plus extension. Then I have to create index.js file containing something like export default from './MyComponent';.
So my question is if there is a way in Webpack to get rid of those index.js files and instead dynamically point to component file itself. Perhaps I could write some plugin, I haven't looked much into a plugin system yet. Just wondering if it's even possible to change fundamentals like this.
I am currently making a Meteor app and am having trouble reading files from the private subdirectory. I have been following a couple different tutorials and managed to get it to work flawlessly when I run the meteor app locally. This question (Find absolute base path of the project directory) helped me come up with using process.env.PWD to access the root directory, and from there I use .join() to access the private folder and the pertinent file inside. However, when I deployed this code, the website crashes on startup. I am very confident that it is an issue with process.env.PWD, so I am wondering what the proper method of getting Meteor's root directory on a deployed app is.
//code to run on server at startup
var path = Npm.require('path')
//I also tried using the below line (which was recommended in another Stackoverflow question) to no avail
//var meteor_root = Npm.require('fs').realpathSync( process.cwd() + '/../' );
var apnagent = Meteor.require("apnagent"),
agent = new apnagent.Agent();
agent.set('cert file', path.join(process.env.PWD, "private", "certificate-file.pem"))
agent.set('key file', path.join(process.env.PWD, "private", "devkey-file.pem"))
In development mode the file structure is different than after bundling, so you should never rely on it. Particularly, you should not access your files directly like you're doing with path methods.
Loading private assets is described in this section of Meteor's documentation. It mostly boils down to this method:
Assets.getBinary("certificate-file.pem");
and it's getText counterpart.
As for configuring APN agent, see this section of documentation. You don't have to configure the agent by passing file path as cert file param. Instead you may pass the raw data returned by Assets methods directly as cert. The same holds for key file ~ key pair and other settings.
As an alternative, you would need to submit your files independently to the production server to a different folder than your Meteor app and use their global path. This, however, would not be possible for cloud providers like Heroku, so it's better to use assets in the intended way.
Here's the situation: I would like to use an image in my Web app, and in my Stylus file (style.styl), I can use the following code to set the image:
.background
background: url(http://path/to/image)
However, is it feasible to save the image to my local app directory, and use it from within the directory?
My directory structure is like the follows:
app.js
package.json
public
css
style.styl
js
images
image.png
views
routes
And I want to use the image from within the style.styl file, which then is parsed and used in my app when someone accesses the specific routing in my app.
However, the following code doesn't work at all:
.background
background: url(../images/image.png)
Also the following code doesn't work
.background
background: url(./public/images/image.png)
So, how can I use the image in my app from within the local directory?
I got this page but I cannot understand everything there at all. Especially, where should I write the code on the page? It looks like it's not assumed to be written in style.styl, which is just a stylus file as far as I know and not a JavaScript file. Also, what should I write in the callback function?
And when I wrote the above code in my app.js, then I got an error: str is not defined, since the stylus(str) implies that I define a str object, which I don't. So I'm not sure what it does at all...
I use my Stylus file in ./public/css/ directory, and I write app.use(require("stylus").middleware(path.join(__dirname, "public"))); in my app.js. Also, I use Express 3.5.1.
This might be helpful (from http://help.adobe.com/en_US/dreamweaver/cs/using/WScbb6b82af5544594822510a94ae8d65-7c44a.html - please don't use dreamweaver):
There are three types of link paths:
Absolute paths (such as http://www.adobe.com/support/dreamweaver/contents.html).
Document-relative paths (such as dreamweaver/contents.html).
Site root–relative paths (such as /support/dreamweaver/contents.html).
In express.js apps the public folder acts as the site root directory.