I am using Meteor.js as well as router.js (the package) in order to render other pages of my website. However, all my templates (the other pages) are in one html file. How can I split my templates into different html files and still use router.js?
One sample router configuration for a template is:
Router.route('/events',
function(){
this.render('eventsPage');
},
{
onAfterAction: function() {
document.title = 'Events';
}
});
Where /events is the url associated with the template 'eventsPage'. How can I put the eventsPage template into a separate html file?
Thanks in advance.
You can have each template in separate file, Meteor detects all of your html code.
HTML files in a Meteor application are treated quite a bit differently from a server-side framework. Meteor scans all the HTML files in your directory for three top-level elements: , , and . The head and body sections are separately concatenated into a single head and body, which are transmitted to the client on initial page load.
Read more: http://docs.meteor.com/#/full/whatismeteor
So your HTML file structure depends mostly on your preference.
You should also take a look at:
http://meteortips.com/first-meteor-tutorial/structure/
Related
I'm using Next.js version 12.0.4 on a new project, having used Next.js version 10 on a prior one.
Has something changed with Static Site Rendering at build time? It's rendering all my output pages when I do an npm run build (which in turn executes "next build and next export") with html files that include a ton of .js files and no native text "content" which I'd expect.
That is, the output doesn't have any of the standard HTML <h1>, <h2> etc. in it, just a bunch of javascript for the client to hydrate.
Prior versions of Next.js (or perhaps it was my configuration?) seemed to render pure, finalized HTML just fine.
I'm trying to render a simple About page (no dynamic routes, no dynamic props for this route) and, while it properly renders a page in the "/about/index.html" output location, that page has a bunch of .js files and a JSON payload. That page does indeed display properly, but I'd really like the output in the "out" directory to be actual .html files with HTML pre-rendered, for SEO and other reasons.
In my next.config.js, I've specified:
module.exports = {
exportPathMap: function () {
return {
"/": { page: "/" },
"/about": { page: "/about" },
};
},
};
I've also specified getStaticProps on the about page conponent (about.tsx). (I'm using typescript if that matters.)
The rendered /about/index.html file has a ton of .js includes and no real HTML "content".
Have I missed a configuration setting? What can I do to make it render pure HTML where I'd like?
AHA! Ok, so this error was of course a coding error on my side.
In _app.tsx, I had a wrapper for Authentication that I had written. By (bad) design, it was deliberately NOT rendering children for it if the user wasn't authenticated. Therefore, the pre-renderer wouldn't render the "regular" html elements, because the pre-renderer of course does not sign in.
If this same problem happens to you, make sure you're not wrapping all views up in some provider element which conditionally renders children.
Load Order Issues
I am having trouble making Meteor load my JavaScript after my HTML file fully loads when I go to localhost:3000. The problem is that my JavaScript keeps loading before my HTML file, and makes the page look unloaded when I use stuff like alert(); or prompt();. I've tried a lot of solutions such as naming my JavaScript file as main.js and putting my HTML file in a deeper directory and using <script> tags. I have also read the documentation concerning this: http://docs.meteor.com/#/full/structuringyourapp Solutions I've tired based off the documentation such as putting files in client/lib , client/compatibility , and lib have proven to no avail. I also tired Meteor.startupand I placed the file for it in the client folder. (The code inside it):
Meteor.startup( function () {
$.get("client/lib/testproject.html")
$.getScript("client/testproject.js");
});
The above sort of solved my problem, but it loaded the JavaScript file two times. The first time was before the HTML loaded and the second time was after the HTML loaded. I don't know a way to prevent the first JS load from happening when using Meteor.startup, so any solutions for that are also appreciated.
The JavaScript file's code I am referring to is simple. (In it's entirety):
prompt("Hello World!");
myList = ["apples", "oranges", "bananas"];
myList.forEach(function(value, index) {
alert('I have ' + value + ' for dinner.');
});
Summary
To summarize my problem:
My Problem:
Go to localhost
JavaScript loads first
HTML loads second
What I Need:
Go to localhost
HTML loads first
JavaScript loads second
The Question: How can I make my JavaScript load only after when my HTML is loaded? And how can I restructure my folder, file-names, and/or code to make it behave as I want it to in this case?
Since the code posted is extremely simple to reproduce I kindly ask that you
run your own solution with a setup similar to what I have and not something that uses a million packages since that is unnecessary for my case, on Meteor, before responding to this.
I'm on Meteor 1.1.0.2
Here is a link to my folder structure with included HTML code along with filenames I used: http://i.imgur.com/24z6bXF.png
I think you missed a decisive information : you should wrap your Javascript code into a Template.yourTemplate.rendered=function () {} function.
That is the meteor way to ensure that your related html code is properly rendered first.
First of all, Meteor will always repackage your files and load them automatically in a specific order (Meteor structuring your app). First files in client/compatibility then client/lib and then the others JS files.
You should also rewrite your code so it does not get executed immediately at load time, like wrapping everything in a function. And then, you should call this code when the DOM is loaded, which does not necessarily mean in Meteor.startup but also in onRendered callbacks in your templates.
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.
I added the JQuery list package to meteor and it recognizes it. But when I write JQuery code inline in <script></script> tags in the apps main html file it does not recognize it ( but I don't get an error). When I write JQuery code in my meteor app .js file I get an error. So I am confused as to how one is suppose to write with javascript or added library packages (like JQuery) once they are added. Thank you.
You need to put general javascript in a container to include it in a specific Meteor template.
For general onLoad scripts that you might be used to, you can encapsulate that code inside a function once the template is rendered
Example:
Template.*templatename*.rendered = function()
{
//do this only on template load
if(!this._rendered) {this._rendered = true;console.log('Template onLoad');}
//everything outside if is done every time the template is re-drawn (meteor sends an update)
}
I am developing a CMS so I need each respective site's global css file to be stored in a database and loaded. I have a controller called util and the method is called sitecss. So my main wrapper view looks like this:
<link rel="stylesheet" type="text/css" href="/util/sitecss">
The css loads, but has no effect. If I view source on the page, and then click on the link, I can see the css just fine. So I know it is being loaded. Is it something about it not coming from a file? Or perhaps the browser assuming it is cached when it is not?
If I make a static file and change to above to
<link rel="stylesheet" type="text/css" href="/css/site.css">
everything works just fine. If I do this in .NET with a handler ashx file, it works fine. It is in php with Codeigniter that I am having the problem. I know someone will ask "why don't you just make static files?" and the answer is, it is not practical for this application. This is for thousands of sites with very rapid deployment.
Thanks in advance!
EDIT:
My controller method looks like this:
function sitecss() {
$cssdata = $this->cmsutils->loadCss($this->session->userdata('sitecss'));
echo $cssdata;
}
So can I just echo a mime-type first? It doesn't seem like this will work as I am making this call within the
write a caching library to pull from the database and create a css file in a cache folder.
You will need:
Library Class
Interact with the css and create a form to perform CRUD
handle cache file monitoring CRUD (every hour or, even on every C,U,D of the form)
Inject the stylesheet cache file into the DOM view
Model
Interact with the database and perform CRUD operations
return data to the Controller for creating the cache file
View
parse out the values into a css stylesheet file format
The other option is to define a mime type with a controller and just load a view with the stylesheet properly formatted. No writing to the filesystem or anything.. Add a .css extension to the end of the URI and call it good...
I do this exact same thing for an app that I just released. I have a form in a view on the admin section of the app that has specified textfields. The user inputs hexadecimal color codes and then it saves/updates the data in the database. The library then creates a cached css file that is referenced in the header view. We did this to eliminate the need for us to add a .gitignore file in a special directory when we deploy the app to several clients.
Could you just load the css by passing it to the view from the controller and then echo it in the header somewhere or somewhere else in the view like this:
controller:
$data['css_rules'] = $this->yourcssmodel->get_css_rules_function();
$this->load->view('yadayadayada, $data);
view: (likely in header)
?>
<style>
<?echo $css_rules;?>
</style>