I am working on nodejs express app. I want to include google polymer ui components in my express app.I tried a lot about integrating polymer in express app. I found no solution for this. Is there any way to integrate polymer ui component in express app ?
I used polymer webcomponents to create a node express server found on this: express-web-components
His tutorial shows how to use webcomponents to create a server, but you can clearly adopt that to your usecase and use ui components like the server ones. Note: To use the server-side web components, the ScramEngine offers access to the runtime.
Basically it is:
Include polymer and your component like so:
<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/express-web-components/express-app.html">
Use your component for example like so.
<express-app port="1234">
<express-middleware>
</express-middleware>
</express-app>
This is only for Polymer 2. Version 3 will be different from the import side.
Related
The file structure is based on sailsjs structure, we don't use sailsjs though, this is how it looks like:
Stack used is : EJS Express/Node MongoDb.
I want to move a certain page from ejs to ReactJS and also implement Webpack with it.
Is there a way I can convert this into a react app, or simply use react with ejs ?
You can use try react cdn links as script tags.
https://reactjs.org/docs/cdn-links.html
I was using html and css before without using frontend framework but now I use Reactjs and I wanted to know how to server side render pages in this way with html:
const app = express();
app.get("/",function(req,res){
res.render("page");
});
Use Next.js light weight framework of react, contains rendering through server-side / client side pages, create dynamic page ,support server and server less target and webpack ,babel configuration, etc.
https://nextjs.org/docs/getting-started
https://github.com/vercel/next.js/discussions/14953#discussioncomment-34938
I have seen lot of videos and posts configuring project with npm (Node.js). I already have .Net server where I want to use React.JS and Redux.
I could set it up for React by adding following JS file downloaded.
<script src="~/Scripts/src/react.min.js"></script>
<script src="~/Scripts/src/react-dom.min.js"></script>
<script src="~/Scripts/src/browser.min.js"></script>
But how to include Redux in my application to use React with Redux?
This question is regarding a pattern that observed while doing some maintenance work on Node.js project with Backbone.js in front end and Express framework in the backend. Usually, when I use backbone.js in the frontend, I will create routes using Backbone.js router component and then render views based on the route being accessed by the user. For example, if the user is accessing /user/settings, it will load the UserSettingsView and the associated model(User).
However, in this project, the way the guy who wrote the code is using Backbone.js is quite different. First of all, the router component and Backbone.js routes are not at all used. All the routing is handled by Express itself. When a page loads, it is initially checked wheather a div with a specific id is present in the page and if it exists, then a specific Backbone.js view is initiated and that div's id passed to that view as the el and the associated model/collection is fetched and rendered. For example, see the code below:
$profileEdit = $("#profile-edit");
if ($profileEdit.length) {
profileEdit = new App.ProfileView({
el: $profileEdit,
model: user
});
}
My question is, is this a recommended pattern to use? Are there any disadvantages/advantages of using this pattern over the conventional pattern?
I want to be able to use nodejs with jquery without having to execute an npm install as I want to use jquery strictly on the client side. I know this is not possible with the Jade templating engine as its syntax is completely different, but is it possible with some other templating engine? I would prefer not to have a bunch of HTML to haml just to make nodejs happy.
It is certainly possible to use jQuery or any other JavaScript client-side library with Jade. You'll need to figure out the syntax to include a JavaScript file and JavaScript code with whatever engine you use. With Jade you can use script() to include an external file (like the jQuery library) and then script to code your specific calls. Take a look at the Jade documentation here: https://github.com/visionmedia/jade#readme
Below is an example of a Jade file that (1) includes jQuery and then (2) updates an HTML element ("message") through jQuery:
doctype 5
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
script(src='http://code.jquery.com/jquery-1.8.1.js')
body
h1= title
p#container Welcome to #{title}
p#message (to be filled in)
script
alert('hello world');
$("#message").html("message set through jquery")
Don't think of Jade as a different language or something that is in any way incompatible with your existing HTML/JS stack - it's just a shorthand way to write HTML which allows you to inject server-side data as a byproduct.
For my personal stack I use express + jade on the server side and then angularjs, jquery and twitter bootstrap on the client side. I use require.js to manage all of my imports, and in my jade template I just have a single script() reference that points to the main.js file that has all of my require.js logic in it.
But, as far as express/jade go - the key is to make sure that you understand that it's not there to complicate your life, it's there to make your life easier. If you feel like it's confusing, switch to a different templating engine or simply have express serve up static html pages with nothing injected and set up AJAX services to get the server-side data you need.