First of all, my website’s folder structure is a bit different. The “index.html” is inside a “dist” subfolder. It’s set up to load when the website is accessed. So far, so good.
I’m using “FormSubmit” to handle email. It has a feature to send the user to a custom success page when filling out the online form to send an email and hitting submit. I created “success.html” and placed it inside the “dist” folder alongside “index.html”.
I set the address for the success page as “www.actacode.com/success.html” to no avail. It didn’t work. I remembered there was an odd quirk when trying to connect a JavaScript file and even though it was in the same folder as “index.html”, I had to set it as “…/dist/index.js” in order for it to work. When I tried the same thing for the success page, setting it as “…/dist/success.html”, it still did not work.
Like I said, it’s not a critical issue, I can always use the default success page that FormSubmit provides, but I would really like to use the custom one to look a bit more professional. I left the non-working setup on the website, so if anybody wants to see it under “view source”, they can. Does anybody know how to connect the two to each other so it’ll work?
I had a quick look at your site and I think I see the issue.
Yes, indeed you did. However, you used a DirectoryIndex rule for this. The DirectoryIndex rule makes it so that if you try to access a directory on your account (whether that’s https://actacode.com/ or https://actacode.com/example/), it will look for the file dist/index.html. So if you access actacode.com, it will load htdocs/dist/index.html. But if you access htdocs/example/dist/index.html.
And if there is no directory for the given domain, then the directive does not apply at all.
Instead, you could use these rules:
RewriteEngine On
RewriteRule (.*) /dist/$1 [L]
This way, the / URL becomes /dist/ (which loads /dist/index.html using the standard DirectoryIndex configuration), /success.html becomes /dist/success.html, etc.
That said, I would personally do it differently. There is not much reason to upload your website’s unprocessed code and node_modules to your website. Instead, you typically just take the contents of the dist folder and upload those directly to the htdocs folder.
It makes things a lot easier because you don’t have to upload hundreds of MBs of build tools that you can’t use on our hosting, and you don’t have to fiddle with .htaccess configuration at all to make it work.
So, I only need the contents of the “dist” folder, and “output.css” from the “src” folder, all placed in the “htdocs” folder? I learned TailwindCSS through a set of tutorials, and it never specified which files were important when putting on a hosting service online. Kind of explains all of the various issues I’ve had up to this point.
If I make that change, then “success.html” would have an address of simply “www.actacode.com/success”, correct? Then I just place that in the appropriate spot in the FormSubmit html tags and everything ought to work correctly?
You should only ever need the contents of the dist folder, period.
The “dist” name is short for “distributable”, meaning it’s the files that you distribute to your users or production systems. By definition, they should be ready to use and self contained, and not need any sources or build tooling to be shipped along with it.
Assuming that there will be a dist/success.html file in your project right now, then yes, it will just work without any additional configuration.