How to use adminlte in React - reactjs

Using React I had used adminlte by setting it in index file and copying the adminlte files but works fine but is slow to load.
I want to use adminlte-react from npm package but if go to install it fails. Error or if installed doesn't run properly. Anyone can help how to properly integrate it or give an example in which it will run because one example used not running and could not find more.
Please help.

Related

Unable to Add React to existing Rails app

I've setup a rails app all good, server runs fine etc, now I need to add React to it.
I see the command
rails webpack:install:react
appears to be the way everyone recommends but when I run this I get the following error:
rails aborted!
Don't know how to build task 'webpacker:install:react' (See the list of available
tasks with `rails --tasks`)
Did you mean? webpacker:install
So I run webpacker:install, alls good then try with :react again and the same errors generated, I've got react added in the package.json file and react-rails in the gem file. I've also run bundled since adding these.
I cant find an answer anywhere so whatever you've got I'll take.
Thank you.
Found the issue, the problem was that webpacker:install:react was removed from webpacker v6, moved to version 5.4.3 and the issues resolved.
More info here:
https://github.com/rails/webpacker/pull/2802/files#diff-8efe491b392a5a50e31b54660bbc0e7258e544e36d4e0b8a65e4cca93d39d18c
As the above answer states, this was removed. If you see a tutorial telling you to run rails webpack:install:react you can simply skip it if you've already run rails webpack:install. React now works "out of the box" and so you don't need to specify it.

How to setup OHIF on windows

Please what is the correct way to have this Running
i am trying to install this and get it running on windows using this documentation.
i have installed Meteor , and then navigated to the folder and typed meteor, as talked about from here and here
I am getting this as Error
run: You're not in a Meteor project directory.
To create a new Meteor project:
meteor create <project name>
For example:
meteor create myapp
For more help, see 'meteor --help'.
Please what am I not doing correctly.
If you want to use OHIF I suggest you upgrade to Version 3.
The setup is easier (with good documentation) and the code is more tidy: https://github.com/OHIF/Viewers
I would also suggest to use docker.
This project helped me a lot setting up my instance: https://github.com/trypag/ohif-orthanc-postgres-docker/blob/master/docker-compose.yml

I cant compile code from VS code to run on browser?

enter image description here
Cant run code using VS code why is that? How do I fix this issue?
First of all, you don't have react installed and so you don't have package.json file,
I would suggest you to search for create-react-app on google and follow their guide to creating a default react application. (From your image I understand you are trying to learn react)
Steps to follow;
Install NodeJS if it's not installed
https://github.com/facebook/create-react-app go there and follow installation guide

How can I use Angular 2 with NetBeans?

I have tried every tutorial I could find to try to make a HTML/JS project with Angular 2 working on NetBeans, but none have worked. Maybe is my npm that is bugged (search, for example, doesn't work).
The node_modules folder that is created with npm install is grey on NetBeans and have some errors in some files (I don't know if this is normal). Any .js I try to import from node_modules folder gives the error Failed to load resource: net::ERR_EMPTY_RESPONSE / Uncaught ReferenceError: System is not defined.
Does anyone have any idea what could I be doing wrong? Or does anyone knows any tutorial that have the code to download so I can compare with what I'm doing and see what is the correct? Every tutorial I have found doesn't have any code to download, just some pieces of codes in the page for explanation.
Sory if this isn't a good question, but I have been trying to make this work since yesterday without success and I'm completely out of idea.
First I recommend to upgrade to the last version of NodeJS and NPM, to minimize the errors in your node_modules folder
Install the Everlaw's Typescript plugin from https://github.com/Everlaw/nbts/releases . If you are using Netbeans 8.1 I think you can install it directly from the Plugins installer. I'm using NetBeans 8.2 and there is no problems installing the plugin manually.
Then on NetBeans go to Tools -> Options -> HTML/JS -> Node.js and write the right Node and NPM Paths and Sources, I would recommend check-on the three check-boxes in that panel.
For a quick start try the QuickStart demo from the angular.io page, it is not necessary make any change in the package.json.
The first time I tried to debug an Angular 2 application I put the index.html file directly in the project folder in order to do not make any changes in the index.html script sources nor change the project files structure but you need to change some properties of the project:
In the project window right click the project and select properties.
In sources change the Site Root Folder using the Browse button and select the project folder (You can ignore the warning that appears).
In Run select Run As: Web Application.
I recommend select Browser: Chrome with NetBeans Connector
Using the Browse button go to the project folder and select index.html as your Start File.
Select Web Server: Embedded Lightweight.
And finally in Web Root write /Your_Project_Folder
run npm install from NetBeans
Click the run button and your web application must open in chrome, if you edit your html or typescript files and save them you could see the changes in the browser in real time without re-debuggind your application and can use the Browser DOM window to explore your elements created from Angular 2.
You still see some errors in your files because NetBeans is not fully compatible with the HTML Angularized syntax. But it runs flawlessly.
You can also run the start script directly from Netbeans to run your project using lite-Server.
Screenshot NetBeans - Angular 2
I would recommend you to install the angular cli: npm install -g angular-cli#webpack
Fore more infos regarding this tool, take a look here: https://cli.angular.io/
Then create a new Angular2 app with ng new <app-name>
This will create a complete and working Angular2 application in the current folder.
cd <app-name> and start the app with ng serve.
Check your new created app in your browser on localhost:4200.
If this works, you can try to get started with your NetBeans! :)

Adding ng-grid and compass to AngularJs fullstack installation

I've installed AngularJS using the fullstack installer here:
https://github.com/DaftMonk/generator-angular-fullstack
I want to now include ng-grid. How do I go about that? I've already ran npm install ng-grid which has copied the files to the node_modules directory. Do I just need to update my index.html file, or do I need to manually update the Grunt file? If so can someone guide me? Can't find anything online that can help me.
I guess the same goes for Compass (I've also already installed Compass using the same method above), as I'd like to initially start using #font-face in my app. I've used Compass several times before but not in this kind of setup...
Thanks :)
UPDATE
I've worked out how I should include ng-grid. Wat I should have done is this in the terminal inside my project's dir:
bower install ng-grid --save
This not only installs the ng-grid files in /bower_components/ but also updates the bower.json in my project's root, so that when I run grunt serve it automatically adds the css & js includes in my index.html page. I'm now successfully displaying a table using ng-grid :)
However I've still not worked out how to install compass successfully. I tried bower install compass-mixins --save-dev but when I save my _fonts.scss file it produces errors. The error being that it can't find the compass files. Maybe the path is wrong, but I read somewhere that that is what I should put at the top (that or just #import "compass";). The paths may also be wrong to my font files, but that's something I'll need to investigate once I can get compass running)
#import "compass/functions";
#include font-face("Roboto-Bold", font-files("../assets/fonts/Roboto-Bold-webfont.woff", "../assets/fonts/Roboto-Bold-webfont.eot?#iefix", "../assets/fonts/Roboto-Bold-webfont.ttf", "../assets/fonts/Roboto-Bold-webfont.svg#LatoBlack"), "../assets/fonts/Roboto-Bold-webfont.eot", "normal", "normal");
Uhh, I don't think you need any installer for ng-grid. The fullstack installer is for setting up your server sided stack. ng-grid.js should (like any other js library you want to pass to the client-browser) be accessible like you would implement (for example) jQuery.
So, assuming your directory structure has a folder called libs/js, put something like:
<script type="text/javascript" src="libs/js/ui-ng-grid_2.0.11-0/build/ng-grid.js"></script>
in the header of your index.html and put the source code of ng-grid to that folder. Or use a cdn server if you don't want to host the directive on your server.
In no case I would tell anyone from outside where my server sided node modules are stored or would give anyone but me and the server access to them.

Resources