I finished this review app tutorial where we used new theme app extensions to create app blocks for the dawn theme. The code for the extensions was built in liquid.
This may stem from a fundamental misunderstanding of how app blocks work, but could react be used to build the front end instead of liquid? For example, could this file which displays the average review rating be built with React? Thanks for any clarification!
The short answer is yes, of course you can inject your React into the theme using an App extension.
The problem is, you won't be offering any control of that to the merchant. Your React code does not play in the sandbox like Liquid does. So where some aspects of the Block are exposed to the merchant, which is a good thing, none of a React component would be.
If you want to play with React, Themes and Shopify, go with Hydrogen. If you want to stay inside the usual Shopify themes, like online store 2.0, you want to leverage the functionality of Liquid.
Anywho, I could wrong... have at er and see what happens.
Related
I am trying to build a Live chat Widget from scratch using React.js and Node.js and was wondering if anyone knows of any resources or tutorials to make it?
I'm trying to do make one but I don't want to use any 3rd party apps because of the long-term cost (everyone has a free trial but it's paid monthly after that) and I would love the guided experience of building it.
Any information helps! Thanks so much for your time.
I recommend you start with my blog article series about how to build a web widget.
This is a step-by-step complete tutorial with GitHub repositories.
You already know what a widget is, so you can start reading from part 2: Web widgets (Part 2): Widget him!
- how to make a widget and load it to the website.
Part 3: Web widgets (Part 3): API Cookbook
is about how to make an API for the widget.
The bonus part: Web widgets (Bonus): Why iframe?
is about the benefits of loading widgets into an iframe.
If you need UI components for your chat, please check my React chat library: https://github.com/chatscope/chat-ui-kit-react.
Additional useful library for managing chat state in react is: React headless chat hook.
For message transport, you can use a plain websocket, but it's less painful to use Socket.io or uWebsockets
We are looking to use KeystoneJS in a large project and we want to be able to customise the Admin panel. There's a nice example of how to do it here, and I've been reviewing this PR to the project. Although the example looks as if it would work for us, I don't understand the logic behind it, that is, what we would need to implement to make it work, what the possibilities and constraints are.
Is it the case that when you use the Keystone NextJS app (which is good for us), if you add a folder /admin/pages the Keystone app will look there and use those custom admin pages instead of the regular ones? I'm assuming we have full access to the rest of the app, the controllers, the DB from these pages as well....
I also noticed that JedWatson notes in https://github.com/keystonejs/keystone/pull/1019 that
Note this lacks SSR support, and I didn't put as much effort into the examples, but it's otherwise (I think) identical in functionality.
Does it lack SSR support just for the admin part, or does adding custom admin pages somehow affect SSR support in the rest of the app? (SSR is the reason we're using next)
Thanks for any info.
There are two api for custom pages, one is pages option in the admin-ui app constructor and 2nd is part of hooks api in keystone constructor.
pages: this one is legacy and only adds custom pages, it does not overwrite the existing list pages in admin-ui it only hides them if not properly configured. usually the Dashboard is visible and all lists are listed there.
hooks: this is new and expected to add more customization options, unfortunately my PRs are stale and they are not the spec keystone core team would want to add. this also does not removes any pages.
admin ui runs as react app built or loaded using webpack config. that is why there is no ssr support. even though the example use a custom admin directory but that not loaded by nextjs component, it is loaded dynamically using webpack server mounting the admin-ui react app
if you really want to have ssr, you can use some learning from closed PRs which were used as POC long ago. but that would be overkill as the admin-ui has many more updates after that.
hooks/pages have access to core limited set of access, there are some access based on React context, provider and consumer hooks. You can use react-apollo hooks as there is already provider wrapped at root of react context. you can also make use of react router hooks, they are upgraded to latest version. it has no access to server side context or controller. (not sure what you meant by controller)
Can you tell me more about the relationship between the two? I want to (for example) write a little tool which plays audio files on my raspberry pi. Would I then do the player and the players interface completely in React, and then just connect to node in order to get the actual files?
Or, more generally but the same thing, if I would want to write an application that does certain things (writes files, records audio, changes system settings etc.) that would all be done in nodejs, but if I want to have an interface I would use something like React?
I am a bit confused, but I hope this question is valid!
Node and React can be used together.
There is even the MERN stack that helps with that:
MERN is a scaffolding tool which makes it easy to build universal apps using Mongo, Express, React and NodeJS. It minimises the setup time and gets you up to speed using proven technologies.
See: http://mernjs.org/
But you can use React with any other Node framework, not only with Express. React can work with any REST API so whatever you use to build a REST API can be consumed by the frontend written in React.
Some other options include: Hapi, Restify, LoopBack. For more see:
http://nodeframework.com/
from the official React Documentation React is "a JavaScript library for build user interfaces". In very watered down terms (and I mean watered down) React could be thought of as a templating library (please don't shoot me for that).
What I've learned about React is it is more like the "V"iew in MVC. It provides you a way to present the user interface using JavaScript and JSX. With the little I know about from various tutorials, I really like working with React.
Yes, this two thinks can work together, I am currently working at such project. I will point out main think here. That is where you put your routing. Does it goes to Node.js server or to React Router. This is important because it defines where you application logic should be.
ReactTS is a scaffolding engine for React on ASP.NET Core. Very powerful, and very fast - will generate your entire application with a single button click. You can also customize the templates. Check it out here... http://bssdev.biz/DevTools/React-Turbo-Scaffolding-Free-Download
I'm planning to learn about Nodejs and try to make a website for upload image or embed video from other site for my class.
It likes a public social network with just a just a few blog features for administrator only.
Cause of the limited of myself and the time, I decide to use an open source Nodejs CMS which has almost those function and contribute it to became my class's website.
Please give me some suggestion, are there any CMS like that?
I tried once Relax CMS, it's really powerful.
From GitHub
Relax is a powerful new generation CMS on top of React and Node.js which aims for a better way of building websites.
It features a live page builder based on components and a smart and easy way of binding dynamic data to them.
It's almost ready for production, but you can check the demo out, and the project page https://github.com/relax/relax.
Did you take a look at Strapi (https://github.com/strapi/strapi)?
Halfway between a Node.js Framework and a Headless CMS, it saves weeks of API development time.
Thanks to its extensible plugin system, it provides a large set of built-in features:
Extensible Admin Panel
Authentication & Permissions management
File management
Content Management
API Generator
GraphQL support
Let me know if you have any question.
Is there a module or similar things that support skinning in NodeJS? I want to build a NodeJS website, and want to be able to re-skin the website as I like without much efforts, like in Wordpress.
Is skinning supported in NodeJS?
If you're interested in building a website in Node.js and don't need a wordpress-style cms behind it, there are few projects that can help you out.
Have you looked into Bootstrap? It's built with less which you can easily plug in to your Express setup (see the guide here, using the command line executable to set up a new project you can specify less like this: express --css less myapp and it will do all the work for you)
In the bootstrap less file are several variables you can use to change the colours, fonts, sizes, etc, and it's also got a lot of helpers for grid layouts and responsive designs.
It even includes a few useful javascript plugins too which make the ui nicer with less work.
There are also a lot of sites with themes and theme generators around which then work on top of bootstrap, and may achieve what you want.
Plugging in this sort of solution (whether bootstrap or other) is about as close as you can come to getting skinning for node; As otherwise suggested if you're looking for a CMS out of the box as well, probably best to look for another platform like Wordpress.
Node.js is not a content management system. It is a platform on top of which you could built a web server with a content management system. To answer your question you need to be looking for node.js based content management systems that support themes.
The only node.js CMS that I am aware of is Calipso. It's still pretty alpha-stage. It may have some theming support, but it is nowhere near as polished as Wordpress.
Also is there a reason why you want to use node.js? I mean there is nothing wrong in using Wordpress for creating a themeable website - it is just awesome for that.
If you just want another OnlineShop, or maybe a blog, i think nodejs is maybe not your right choose as Jed Watson told.
If your requirements are more complicated, and you want a quick and easy implementation of a nice web interface, and you have html, javascript, and css knowledge... I strongly recommend you just trying to work with MEAN.js
It puts together MongoDB Expressjs, AngularJs, and NodeJs.
Use this, for example with a yeoman fullstack constructor and you will have a powerful webapp, with user autentication, and much more in a few minutes.
After that, the use of jade, less, scss, and similar languages of modelling the front, and the easy way you can also model collections in the back, is for me the best combination you´ll find for creating a website today.
Hope it´ll help you
King Regards