Meteor: Static HTML page as root - meteor

I made a meteor app, added a /public directory full of .html, .jpeg, etc...
It all works nicely just like that except that going to my domain's root doesn't show anything; I have to type in /index.html.
How can I make my domain root go to public/index.html?

Meteor wasn't really made with serving static content (in the form of HTML) in mind. The public folder is really used to serve things like the favicon and maybe an image here or there (http://docs.meteor.com/#structuringyourapp).
While you could technically do something like:
if (Meteor.isClient) {
window.location = 'index.html';
}
It's not really how it's supposed to work. And this brings other problems, such as making sure this only works on the / route.
A far better solution is to have nginx stand in front of a running instance of Meteor and serve static content directly.
It all really depends on why you're attempting to serve index.html like that. If it's for SEO purposes, just use normal Meteor templates (and routing) and use the spiderable (http://docs.meteor.com/#spiderable) package.

What Dino suggests is definitely true, but from your description ("my domain root doesn't show anything") it sounds like you might just want to put your index.html into your client folder and edit it to accommodate the way meteor likes it, namely removing all doctype declarations and the html tags. Afterwards you should be seeing something when you go to your domain root.
If you want to serve several different .html files, you could check out the iron-router, which allows you to do server side routing.

It's not standard practice to use mywebsite.com/public/index.html.
One reason is your site won't render the index page without navigating to mywebsite.com/public.
But if you really want to do this, simply add a public folder within your public folder.
public/public/index.html

It sounds like for what you're trying to do you'll want to put the index.html file into the form of a meteor template and then define that template as the one to be used for the '/' route in your routes file.
For example your template would look like:
<tementer code hereplate name="home">
<h1>My Home Page</h1>
</template>
And in your router file:
Router.route('/', function() {
this.render('home');
this.layout('homeLayout');
});
This is assuming that you're using Iron Router and have a separate template file that you're using for the layout. If you need a further example let me know and I'll be happy to help.

Related

Redirect to dynamic route with regex on NextJS config file

My problem is that I'm building a new site, and in my old one there was some pages with a child route /feed.
For example: www.mypage.com/blogs/blog-1/feed
So, what I'm trying to do is to redirect from /blogs/blog-1/feed to /blogs/blog-1, but now it shows me an 404 error.
These blog pages are dynamic, they are inside a [slug].tsx file, so what I've tried was to made an [...slug].tsx file, but because I'm using getStaticPaths and getStaticProps methods, it doesn't works (Or I don't know how to do it properly).
So, my other option, and the one that I think is the most appropriate, it's to add some kind of redirect regex expression on next.config.js:
{
source: '/blogs/:slug(/\feed/)',
destination: '/blogs/:slug',
permanent: true,
},
Am I right, or is there a better way to do this? Because obviously the code I have put in does not work, I am not telling to the config file how to remove that '/feed' fragment from the :slug.
Thanks in advance :)

trailing slashes, routing me to a different page in next.js

I am using nextjs to enable SSR in my application. Application structure is:
components -
component1.js
public -
img1.png
pages -
/order
[order].js
[country].js
contact-us.js
review.js
if I do 'localhost:3000/contact-us/' ,it routes me to [country].js.
I think when we do /contact-us/, it consider it as folder, but folder is not really there it takes first page that comes in that directory.
I have tried using exportTrailingSlashes: false in next config but it did not help.
I think the best way to avoid this would be to put your [country].js page in a /countries folder. That'll make your pages look like:
pages -
/order
[order].js
/country
[country].js
contact-us.js
review.js
Then you can get to the country endpoint via http://localhost:3000/country/[country].

How am I supposed to use index.html?

Is index.html meant to be just the first page among many separate HTML pages, or is it supposed to be the only page, and the other pages are just snippets put inside of it? And by supposed to, I mean, what is the best/most common practice?
I used to think the former, but I just tried using HTML5-Boilerplate and it's setup seemed like it was implying the latter. All this awful meta stuff and imports (is there a term for that?) is in the index.html, and I don't want to have to put that in every single page. Same goes with the navigation bar and the footer which is on every page. And the project structure doesn't have an html folder (obviously I could make my own, but I took it as implying I didn't need one). It sounds ideal if instead of loading a different html page I just leave a placeholder and insert another file, but I don't know how to do that other than an iframe, which would be ugly. How would this approach work, if it is the right way?
If you couldn't tell I'm very much a beginner. I feel like this must be a common question but I don't know what the term(s) for this is, so I've been having trouble searching. Thank you
Many web servers will have a 'default document' that is returned when you specify just a path and no file name. So browsing to http://example.com will return the default document from the document root directory of that domain.
Quite often the default document can be named index.html, index.htm or -if PHP is installed- index.php, but they can be other names as well, depending on the configuration.
Some sites are built up from many actual html files, while other, more dynamic sites usually look like they consist of many html pages, but actually they just have a single entry page (like index.php) that handles all requests and generates output based on the url.
HTML5 Boilerplate (assuming you mean this one) describes a structure for a site. This structure is mostly the build-up of HTML, CSS and JavaScript. The index.html included with it is only a skeleton HTML file. It describes what your output should look like. How that output is generated is up to you. You can create a big folder full of separate HTML files, or a dynamic site with a single entry point, like described above. The HTML5 document, the CSS and all the other front-end stuff are interpreted by the browser, and it doesn't care how that content was generated.
Is index.html meant to be just the first page among many separate HTML
pages, or is it supposed to be the only page... I mean, what is the
best/most common practice?
index.html is best left as the "home page" or "landing page".
When opening your site's root directory in a browser, index.html will be opened by default. If you have no index.html page, you will get a directory listing of all of your files on that server (live or localhost), acting just like a file explorer on your local machine.
All this awful meta stuff and imports (is there a term for that?) is
in the index.html, and I don't want to have to put that in every
single page. Same goes with the navigation bar and the footer which is
on every page.
This doesn't have much to do with the index.html page. If you do not want to have all of your nav, header, footer, scripts, ect. repeated on every page, you will have to use PHP (specifically: includes). Otherwise, if you are using only HTML, you will have to repeat the same information on every page.
The rest of your question goes a little off topic, since explaining index.html does not really go into iframes or any of what you might put into a page.
Many websites use htaccess files to determine which web page in your website acts as a default page. index.html is generally used as the base page in most htaccess files, followed by home.html if index.html cannot be found. Of course, these files and the order can be changed but this is default behavior. Here is an example of how web host ipage orders their .htacess priority:
index.html
index.htm
default.htm
default.html
Default.htm
home.html
home.htm
Home.chtml
Home.html
Home.htm
index.py
index.php
index.shtml
default.shtml
index.php3
index.pl
index.cgi

SilverStripe 3: Load/Create page outside of the CMS

is it possible to create a page outside of the cms?
For example:
I would like to use jquery .load() to load a segment into a current page.
Is it possible to create a html or .ss file somewhere in the theme folder eg: self-contained-page.html so if I then visit www.domain.com/self-contained-paged.html I will be able to visit this page.
While you can of course serve static files, you can also "ajaxify" parts of your page. Not sure if that's what you want to do, but in case someone else is trying to do something similar.
While you could use some fancy tools like pjax or history.js, you can also do it manually. I've recently done this with SS 2.4, but SS 3 should be pretty similar:
In your controller, add a public function so you can access it via /yourpage/load (or whatever you want to call it):
public function load(){
return $this->renderWith(array('AjaxLoad'));
}
In your templates/Layout add a file AjaxLoad.ss.
If you only want to serve that page via your jQuery .load(), simply add the content right inside the file.
If you want to use the piece of content both on your regular page and want to replace it with the ajaxified version, use <% include PageSnippet %> both on the general and the ajaxified page. Then simply define your content in templates/Include/PageSnippet.ss.
You can see it in action at http://www.contentaward.at/content-lab-vienna/608#details (click on the small images at the bottom of the page). Hope this makes it clear.
there is no problem with serving static html files from anywhere in your silverstripe installation, just note to always add the file extension to your urls, as otherwise silverstripe's url routing (using mod_rewrite, see the .htaccess file) will kick in.
also note to always use the full path to the file, so in case you placed your file in 'themes/mytheme/test.html' the url will be 'http://www.domain.com/themes/mytheme/test.html'
You can of course reference a html file in the theme folder just as you would do with a css file, f.e. :
www.domain.com/themes/yourtheme/self-contained-paged.html
If you dont mind to not have it in the theme folder you can also place it into root dir.
Or you can modify your .htaccess and apply some mod_rewrite or redirect rules to point into the theme folder.
If you want to use .ss files you probably have to use CMS pages.

How to Properly Reference a JavaScript File in an ASP.NET Project?

I have some pages that reference javascript files.
The application exists locally in a Virtual Directory, i.e. http://localhost/MyVirtualDirectory/MyPage.aspx
so locally I reference the files as follows:
<script src="/MyVirtualDirectory/Scripts/MyScript.js" type="text/javascript"></script>
The production setup is different though. The application exists as its own web site in production, so I don't need to include the reference to the virtual directory. The problem with this is that I need to modify every file that contains a javascript reference so it looks like the following:
<script src="../Scripts/MyScript.js" type="text/javascript"></script>
I've tried referencing the files this way in my local setup but it doesn't work.
Am I going about this completely wrong? Can somebody tell me what I need to do?
Thanks
Use ResolveUrl("~/")
<script src="<%=ResolveUrl("~/scripts/myscript.js") %>" type="text/javascript"></script>
~/ will get to you the root of your application, virtual or otherwise
Previous answers seem to assume that the Scripts directory always exists as a subdirectory of your application root. If that assumption is correct, and if the page is also at the root, then both of your earlier tags can be simply:
<script src="Scripts/MyScript.js" type="text/javascript"></script>
But my read of your second example is that Scripts isn't always a subdirectory of your application root (because the ../ at the beginning moves up a level, so Scripts would be a peer of your application root). That said, you did say the second example didn't work. :-) But if that's really the case, I'd strongly recommend adjusting one environment or the other so that the relative paths agree, and then always using relative paths as above.
The only reason for using ResolveUrl as far as I know would be if the pages in the application are in a folder structure and the tag may appear in a page at the root or in a page in a "subdirectory". If so, you can use ResolveUrl in both cases so you have an anchor point. I never author things that way, I always ensure I know where the page will be in the hierarchy (if there needs to be a hierarchy) and use an appropriate relative path for the current document.
You can use the HttpRuntime.AppDomainAppVirtualPath property to get the virtual path (if any) for your app and use that to fix up the javascript paths (using <%= ... %> in the <script> tags etc.)
You can further add a global javascript variable in your master page that exposes that value as well, so that any scripts that need to know the actual app root can access it that way.
Another way in MVC5:
1) in the layout html View file, place RenderSection in the place you need the script to be:
<html><body>
#RenderSection("scripts1", required: false)
</body></html>
note that you can change the "Scripts1" to be whatever name you like.
2) in your view html file, just call the "scripts1", doesn't matter where, with your path and js file name:
#Scripts1.Render("~/Scripts/MyScript.js")
3) make sure the MyScript js file is in the Scripts Folder of your project.
That's it.

Resources