I have created a hellow world module as per tutorial. Now I want hello world to be displayed on every page I create instead of going to site/helloworld. How can I do that?
Use an HTML widget on the default layer.
Related
In my MERN I have a main HTML, EJS template with JS codes. Users after authentications could choose several products that each products has been developed by create-react-app and each have their own builds.
Assume that I have 2 react apps with their own bundle. So after use request to select one product based on a link ( for example : mydomain.com/prod1 ) the first react product build should be used. For the second product ( for example : mydomain.com/prod2 ) the second react build should be used and so on.
I have no idea how could I do that.
Currently, for one product I could make the bundle and basically use the below code in node that load the build for the first product. Obviously if I have more products then I do not know understand how node understand which folder should be served to the client.
app.use(express.static(__dirname+'/prod1/build/');
thanks
you want to build a micro-fronted app i think one way you can do it is serve the built react apps in an frame into your main template like at two pages and inject an iframe in them and one the clicks prod1 -> you get html prod1 which injects an iframe with the prod-1 react page in it and like that you can share both apps in the same template , there is a lot of optimization you can add , i even may suggest that the main app would be a react app too so you can have more control over it here is a link of a repo explaining the concept and you can check google for any more information about micro front-end it's easy but complex in the same time
Apologies for the relatively conceptual question. I'm attempting to emulate the full-page Heroku loading screen that appears when the page first loads and disappears after the navbar, images, libraries, and other components have mounted:
I know the underlying stack of Heroku is Ember, but is there a good practice/way for accomplishing a similar effect using node.js, webpack, react, react-router, and express. It's not isomorphic and I would prefer all rendering to take place on the client.
Thank you for your help and let me know if there's any other information that would be helpful in understanding what I'm trying to do.
I haven't tried this but I imagine you could simply provide the HTML for your 'full page loading screen' as the initial HTML that comes with your page, and then simply replace it with your ReactDOM.render call which will only get processed after everything has been processed.
More specifically, if you put all of your JS script tags in the footer, then the rest of your document will load and render while the scripts are being loaded, giving you your 'loading screen' effect. It should work to simply put the loading graphic within a div and then render over it with React.
How can I make a handler deliver HTML (using hamlet), whithout wrapping it inside defaultLayout?? They will have as root a div tag, not something inside a whole html tag. Such way should also consider internationalization.
Using Angular with Yesod works well because angular templating happens inside valid html that hamlet can generate.
Besides the current comment answer you might consider including a lot of templates using script tags inside a layout. I have done this before where there was a front page layout, an app layout, and an admin layout.
I am working on a POC on Node JS, and I learnt that a typical tech stack will look like - Jade (instead of HTML)/ NodeJS/ and some database. My question instead of Jade can we use HTML 5? This is to avoid learning one more language to complete the POC. Also I assume that I will be able to expose the Node JS methods as rest API instead of having PHP or Java layer.
More over if I use simple HTMl/JQuery - for UI and Node.js ( for restful service) it will be easy for one to migrate to other framework easily. Please share your experience.
This is more an opinionated question, so i would like to share my opinion.
My question instead of Jade can we use HTML 5?
Jade is not alternative of HTML5. Jade is a templating engine whereas HTML5 is not. So, both are different.
Getting back to your question, you can use HTML5 as well.
Role of Jade
Ex: Consider yourself in a scenario where after user login you need to display a profile page and in profile page You need to print 'Hello '.
Since is dynamic value, so it can't be hardcoded in HTML file. Therefore, you place a placeholder in HTML (since you have added placeholder and made your HTML file generic for all user, thats why such file is called template file instead of plain HTML file). Now you can fill the placeholder with dynamic value either on server side or on browser.
If you select to replace placeholder by their value on server side, you use some templating engines. Ex EJS, JADE etc. Templating engine are responsible for generating HTML from template
If you select to replace placeholder by their value on client side, then you can choose to opt Ajax calls and fill your placeholder using Jquery or Angular.js may be handy if your project is expected to be big enough.
if I use simple HTMl/JQuery - for UI and Node.js ( for restful service) it will be easy for one to migrate to other framework easily.
IMO, using HTML with jquery for UI is better, since it is simple and traditional and you will get more support on community forum. Also, you wont have to learn template, templating engines straightaway.
I want a nodejs server to host an angular single page application, using angular route module.
Does the route need to get the different views from the server every time I navigate to a different view?
Is there any way to send a bundle of htmls to the client?
Am I missing something really basic?
There are some sample applications built with Angular, you should read them before starting with something like this.
To answer your question: It depends on you.
For example the "webmail-lite" client is a single page application (maybe not Angular but it's the same logic) and they transmit all template "views" (html snippets) as inline:
<script id="Mail_LayoutSidePane_Toolbar" type="text/html">
<div class="toolbar">
<span class="resizer_top" data-bind="event: { 'dblclick': resizeDblClick}"></span>
</div>
</script>
So you just take care of the data you want to display and create your server-side views to deliver the main index.html file and your data/RESTful/JSON-Views.
A more "clean" way of inherit templates is the use of require.js.
OOPS...
ng-app was directed to the wrong module.
Therefore the route wasn't able to get the view.