I have been an Angular1 developer and recently considering using Angular4 for a new web application project.
With Angular1, I used to purchase an 'Bootstrap Admin Theme' which came with well done and consistent CSS and a lot of JS plugins put together which allowed me to focus on the application itself. I used to insert Angular1 code into it in the areas where there was data manipulation and I enjoyed doing that. So I had the best of both worlds.
Is there any way, this could be achieved in Angular2/Angular4, 1) without really missing out the JS plugins the Theme offers and 2) without having to copy the CSS everywhere ?
Yes it is possible but you will have to do 'some' tweaking.
Template
First of all import all your js plug-ins through npm
npm install (plug in) --save
Then you will have to edit your angular-cli.json to include js plug-ins (js & css)
"styles": ["styles.css"],
"scripts": [],
Put the path to styles & scripts in to array
Then you should add main template css file in to predefined styles.css
Next you should break up your pages in to components (view components and 'tag' components).
Now about custom app dev:
Add your custom
- js in to *.component.js
- css in to *.component.css
- html in to *.component.html
(* stands for component name)
et voila...
Related
I'm looking to embed my react application into an existing plain html / javascript website. What I've found so far is that you are only able to embed individual components into existing websites, not entire react applications.
Naturally I have an app component which contains the entire application. Am I able to embed the full application by embedding this component? My concern is all the modules I'm using (e.g. axios, bootstrap) will break.
I've been looking for a good tutorial on how to do this but I'm not finding many examples of trying to embed the entire application into an existing page.
My understanding of how to do this, is to reference the react javascript source links in the html page head, possibly also babel although its unclear to me if babel will work. Then we can use the renderDom method like we normally would.
On page load can I run my index.js file to insert my react app component into the dom? If this would work, are there any issues with file structure, file updates I would need to take care of?
If I'm driving off path out into the wilderness and there is a better way to handle it I'm open to suggestions. I'm just looking to see if someone else has experience doing this before I start down a bad path.
I was able to embed my full react application by doing the following...
I built my react app production files with npm run build
I copied those files into the existing web project at the root level
Then I opened the index.html file generated from npm run build and copied the scripts in the head and body sections to the page I wanted to drop in my application
Finally I added a div with the id root (this is what my renderDOM method is looking for) where I wanted my application to appear on the existing web page.
That was it. Super easy, thanks for the help!
Just wanted to add a quick additional approach here.
If you already have a Flask app and you're trying to put React components or an app (so the base component of an app) onto an existing HTML page in the Flask app, basically the only thing that you need is Babel, unless you are able to write React components without using JSX (so in plain Javascript) in which case you'd need nothing.
Step 1: To attach Babel to your project, you'll have to grab the Babel node modules which means your project will be associated with NPM for the sole purpose of using the Babel functions. You can do this by running the following commands in your project root directory (Node.js must be installed):
npm init -y
npm install babel-cli#6 babel-preset-react-app#3
Step 2: Once Babel is attached to your project, you'll have to actually transpile the existing React component .js files from JSX into plain Javascript like so:
npx babel --watch (jsdirectory) --out-dir (outputdirectory) --presets react-app/prod
where (jsdirectory) is the path to the directory where your React component files written using JSX are, and (outputdirectory) is where you want your translated files to show up--use . for (outputdirectory) to have transpiled files appear in your root directory.
Step 3: After the plain Javascript versions of your React files appear, make sure they are linked to your HTML page instead of the original JSX-utilizing files (replace the original script tag's .js file)
Step 4: Make sure the HTML page in question is linked to the .CSS files you want (they will modify the transpiled Javascript in the same manner as they did the JSX files in a project made using Create-React-App because the class names are the same) as well as the required React resources:
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
After you do those quick steps your React components should render no problem on that page in your Python-Flask application.
On the telerik site, I found the page
https://docs.telerik.com/kendo-ui/intro/installation/cdn-service#accessing-the-cdn
which mentions the CDN url
http://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js
However, that file doesn't have the definitions for the React components Grid and GridCell.
This even though these definitions are in the NPM package #progress/kendo-react-grid.
Is there some other CDN url that gives me the .js file for Kendo UI for React?
Alternatively, if that file is not available from a CDN, is there a single file with all Kendo UI for React code that I can serve from my own server?
I have to load Kendo UI for React using a separate script tag. I can't use webpack or browserify to pack node modules.
The kendo.all.min.js is the jquery suite.
The kendo react grid is here:
https://unpkg.com/#progress/kendo-react-grid#1.3.0/dist/cdn/js/kendo-react-grid.js
It is per-package, and there is no something like all.js at-least at this point in time.
The best public CDN is jsDelivr: https://www.jsdelivr.com/
It can serve up files and bundles directly for any NPM package, Github repo, or Wordpress plugin. You can even combine several files together into a single download.
Here's the package for Kendo UI React Grid: https://www.jsdelivr.com/package/npm/#progress/kendo-react-grid
Download the file you need there or add it to the "selected files" on the right to build your own custom script bundle.
I am very new to react and drupal 8. I know to create custom modules in drupal and react SPAs, but I m not able to call my react app using a drupal8 controller .
Can someone please make me clear of the flow and the correct way to integrate react app in drupal 8?
So there isn't really a good means of calling a React application from within the regular Drupal controller layer or in the twig templates of Drupal 8.
There are two ways people usually connect a React Application to D8.
Option 1 - Progressively decoupled sites - This is where Drupal still uses the TWIG engine to generate the vast majority of the site views, and can use React for some small part of the site while communicating with Drupal through a Drupal based webservice. Check out this project for more information - https://www.drupal.org/project/pdb. This is a nice option if you just want to add a small React based widget, but want to keep the bulk of your site in using standard TWIG.
Option 2 - Fully decouples sites - This is where you render 100% of your applications view layer using React, and just use Drupal as a CMS that provides a web service. There are multiple options for the webservice portion including https://www.drupal.org/project/graphql and https://www.drupal.org/docs/8/api/restful-web-services-api/restful-web-services-api-overview. So an example of this would be serving a create-react-app on a static server and communication with D8 through a web service.
Here is some additional information that might help guide your decision.
https://dri.es/how-to-decouple-drupal-in-2018
Best of luck!
Long post with some assumptions(but it works):
I was seeking to achieve the same (Drupal 8 and react decoupled block), and I searched and searched, I found myself returning to this page more than once, so I will leave the little thing I discovered here.
My Assumptions:
you have created a custom block that has it's own twig template.
you have defined your libraries in your libraries file (we will review this)
you have created your react app in the root folder of your module with npx create-react-app my-app.
create-react-app my-app creates a react app inside my-app folder, my-app contains all the react code and configs. To get our app(custom react js library) to play well with drupal we will need to override somethings, like scripts to rename our files (build command),to something drupal can identify(recognize) and load.
Run yarn add react-app-rewired --dev, to download react app rewire, that let's us override the default react-app configs without having to eject our app.
In the root of your react-app folder, create a file named config-overrides.js that should contain the below code
module.exports = function override(config, env) {
config.optimization.runtimeChunk = false;
config.optimization.splitChunks = {
cacheGroups: {
default: false
}
};
return config;
};
and edit the scripts in in the package.json to
"build": "react-app-rewired build && yarn run build:dist",
"build:dist": "cd build && copy static\\js\\*.js main.js && copy static\\css\\*.css main.css",
NB: I have edited the build command and added the build:dist script (however if not on windows please
replace copy with cp and \\ with / in the build:dist). This will make sure every time you run the build script, your build files will be renamed to main.js and main.css without the filename..js/css which we can then reference in our libraries.yml file.
my modulename.libraries.yml looks like this (filename = modern_js_drupal.libraries.yml)
react_local:
version: 1.x
js:
my-app/build/main.js: {}
css:
layout:
my-app/build/main.css: {}
and my block.html.twig
<div class="row">
<div id="root">
<h4>React App</h4>
</div>
{{ attach_library('modern_js_drupal/react_local') }}
The reason I named my div 'root' and not anything else if because react app uses the same id when rendering your app.
Look into react_js/public/index.html and react_js/src/index.js. index.html provides the div to hook our app into and index.js renders the app on the div provided ( ReactDOM.render(<App />, document.getElementById('root'));), The advantage of this during development is, you get to create your app and view the changes instantly on your app (http://localhost:3000/) and you can later run yarn build to view the most recent changes on your drupal 8 site.
I have a project written in angular 1.x according this template by John Papa:
https://github.com/johnpapa/ng-demos/tree/master/modular.
Basically i use a gulp to build a minified js for production and another task (called 'index') that injects all the js src files (without minification) into the index.html file.
How should I change things now when adding typescript to my project?
specifically, my issue is when I have a class B which inherits from class A and they both on the same namespace.
how can I make sure that in the minified js file or in the index.html injection the order of the classes will be according the dependencies?
Note also this issue that I've opened for another template, a one that shows how to use typescript with Angular - https://github.com/johnpapa/hottowel-angular-typescript/issues/24
Many thanks!
I am in and out of a project with Meteor, trying to wrap my head around this framework (documentation is comparable to Ruby... just terrible and fragmented), and I get this error :
While determining active plugins:
error: conflict: two packages included in the app (barbatus:angular2 and
templating) are both trying to handle *.html
And this is my installed packages :
autopublish 1.0.4 (For prototyping only) Publish the entire d...
blaze-html-templates 1.0.1 Compile HTML templates into reactive UI wit...
ecmascript 0.1.5 Compiler plugin that supports ES2015+ in al...
es5-shim 4.1.13 Shims and polyfills to improve ECMAScript ...
flemay:less-autoprefixer 1.1.0 The dynamic stylesheet language + Autoprefixer
insecure 1.0.4 (For prototyping only) Allow all database w...
jquery 1.11.4 Manipulate the DOM using CSS selectors
meteor-base 1.0.1 Packages that every Meteor app needs
mobile-experience 1.0.1 Packages for a great mobile user experience
mongo 1.1.2 Adaptor for using MongoDB and Minimongo ove...
semantic:ui 2.1.4 Official Semantic UI Integration for Meteor
session 1.1.1 Session variable
standard-minifiers 1.0.1 Standard minifiers used with Meteor apps by...
tracker 1.0.9 Dependency tracker to allow reactive callbacks
urigo:angular2-meteor 0.2.0+ Angular2 and Meteor integration
Now, I know that barbatus:angular2 is used by urigo:angular2-meteor, but I'm unsure why it would conflict with templating (which is obviously required by something else... if not meteor-base itself.
How do I fix this?
** Edit **
This is my only .html file :
<head>
<title>larpdb</title>
</head>
<body>
<h1>Welcome to Meteor!</h1>
{{> hello}}
</body>
<template name="hello">
<button>Click Me</button>
<p>You've pressed the button {{counter}} times.</p>
</template>
Basically, this is a brand new empty project; how can I avoid getting this error? Do I have to strictly not use <template> tags in my project?
In Meteor 1.2.0.2 you can use
> meteor remove blaze-html-templates
Changes to your project's package version selections:
blaze-html-templates removed from your project
caching-compiler removed from your project
caching-html-compiler removed from your project
templating removed from your project
templating-tools removed from your project
Then add the urigo:angular2-meteor package (must download from GitHub)
> meteor add urigo:angular2-meteor
In meteor .html file have templates only. If you are creating angular templates and giving same extension then at that time it will throw error. because in meteor only master file have html tag and if you adding different html file not having template tag then it will treat it as HTML file and add html tag in it while building.
so if you are creating templates for angular just rename it somefile.ng.html.
so that while meteor build it will don't have conflict.
meteor remove blaze-html-templates
meteor remove ecmascript
Run the following commands to remove meteor's default ecmascript package .
Now the app should run fine .