I want to build a web client using react.js and semantic ui. There is a node package to use semantic-ui with react.js; semantic ui react. I have already installed this package on my computer following the instructions on react.semantic-ui.com/usage, but upon testing the with a simple webpage.
I think I have this issue because I failed to use this last instruction:
import '.../semantic/dist/semantic.min.css';. The semantic folder has been generated in my project main folder, but the dist folder and the semantic.min.css have not been generated yet. Where and how should I use this?
NB: I also tried adding this <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css"></link> to my index.html page and the page was style as expected. I don't want to use this option as I cannot change the them with it.
First - install css npm install semantic-ui-css --save
Then - import in at the index.js page (the very top level)
import 'semantic-ui-css/semantic.min.css';
First, use one of below package managers to install semantic UI react package.
For npm users:
npm install semantic-ui-react
For yarn users:
yarn add semantic-ui-react
Then add this import line to your index.js
import 'semantic-ui-css/semantic.min.css'
That's all.
For npm user:
npm i semantic-ui-react semantic-ui-css
semantic-ui-css is a package dependency of Semantic-ui-react (SUIR) and is the css only distribution with a unique theme. Semantic-ui is written in Less and provides a larger and finer control (per component) over the production of the final stylesheet (dist/semantic.min.css).
It delivers several themes easy to derive to create your own, and a proper picture about how to keep a big and complex css well organized and not invasive with less.
in node v12, the installation of sui-css may fail,
complaining that ReferenceError: primordials is not defined. See
https://stackoverflow.com/a/58394828/1874016.
You can also
git clone https://github.com/semantic-org/semantic-ui
apply the patch above in here.
and yarn install
Note the default semantic.min.css size is 628Kb and you probably don't need the styling for all the components it has.
npm install sematic-ui-react sematic-ui-css --save
In your root file probably src/index.js add
import 'semantic-ui-css/semantic.min.css';
Some common layouts can be found [here ]:(https://semantic-ui.com/usage/layout.html)
Related
I've got quite some experience in (web) development (Java, ASP.NET and PHP amongst all), and fairly new to React and Node JS.
Although I did multiple tutorials and read multiple articles, I feel like I'm missing some point here and there. Currently I'm working on a React app which implements a nice HTML template I found.
One React tutorial I did used Webpack for building and deploying the app (local). This works nice, does the job of transpiling ES6 (.jsx) and SASS using babel. So far so good :)
My template has an image slider (Owl Carousel), so I installed the react-owl-carousel module.
This gave me quite some problems with jQuery (also installed as a module).
After several attempts to fix this I decided to move on to another slider module, React Awesome slider.
I used the module as the README.md explained. But upon building it (npm run build), I got an error that the .scss file within react-awesome-slider could not be transpiled. A message like "are you missing a loader".
So I installed sass, node-sass, sass-loader etc etc and configured these in my webpack.config.js.
I also noticed the react-awesome-slider module within node-modules contained a webpack.config.js.
Long story so far, sorry, now to the essence of this question.
In what way can the modules installed (like react-awesome-slider) be considered "black boxes"?
It doesn't feel logical that all the modules get build when building the main app. The "exclude: /node_modules/," config in webpack.config.js prevents this, not?
So why does the react-awesome-slider give an error about .scss transpiling? I had no .scss rule in my webpack config then.
Will all dependend modules automatically get installed when installing a new module? So when I run "npm i react-awesome-slider --save-dev", will its dependencies also be installed? Or is this not necessary? And do I need to update (webpack) configuration after installing a new module? Or is it really black box and "self-containing"?
Any help would greatly be appreciated!!! Maybe there is a good react-webpack sample app on Github or something like that?
That also confusing me for a really long time. Here are some answers to your question.
people publish packages to the NPM, so a module your project depends on
can be pre-builded or source code, it depends. I have checked react-awesome-slider, it's main field in package.json is dist/index.js, directly import it won't cause an issue because there are no SCSS files.If you follow the CSS module usage instruction you have import react-awesome-slider/src/styles and you will find src/styles.js file import ../styled.scss,so webpack will load it with SCSS loader which you have not configured, that's why an error occurred.
while you install modules, npm will go
through its dependency tree, install its dependencies, dependencies'
dependencies, until there's no more dependency module to install. before npm 3.0 the node_module folder is tree structure reflects the dependency tree, but it causes problems that many modules relay on the same dependency, npm will download and save too many same files, after version 3.0 it becomes flat(release note here, search flat keyword).
You don't need to update your webpack config after you install a dependency cause webpack build process will handle it with file dependency tree. You have installed a package and import it in your activation code, file there will be handle( with its package.json main field file as an entry), you have installed a package without using it or import it in a dead file(dead file means you cannot find it from webpack entry file), it will be ignored by webpack as it's dead code.
I have too many confuse until I read npm docs. Good luck to you.
Node modules are build to execute packages.When the are compiled they have proper configuration to handle extensions that are imported in it and when you import something like .scss in your main app then it does not know about that extension then your webpack need rules to include that extensions.
It does exclude node_modules as the are pre-converted pr pre build.
More over webpack is bit tough so developers create CRA Have look at it.
First of all, huge apology for naive question and if this sounds duplicate.
I wish to install a package, for example material-ui, as an external dependency under a different path like ./node_module/my-material-ui. The problem is I don't seem to find any option to tell npm to do this other than --prefix option which actually doesn't help because it installs the package under ./node_module/my-material-ui/node_modules/material-ui. Infact, this makes sense since it prefixes the installation path. I searched around but didn't immediately find a solution.
Now as a following question, instead of individually (and locally) installing the aforementioned package using npm install ..., you wish to specify where the package has to be installed in package.json. In other words, how one can achieve the above goal by specifying that inside package.json.
Thanks in advance for your help and recommendations!
The migration guide covers this scenario.
yarn add material-ui#latest
yarn add material-ui-next#npm:material-ui#next
then
import FlatButton from 'material-ui/FlatButton'; // v0.x
import Button from 'material-ui-next/Button'; // v1.x
This is my first electron app, which is based on quick-start app. I want to add twitter bootstrap's css. So I installed it like this:
npm install bootstrap
And included in the index.html like this:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
When I run: npm start from terminal it works fine. However when I try to build it using electron-packager like this:
npm run build
I get a native mac app "myApp.app", but when I open it, I don't see the styles.
The only files in the application aside from node_modules and package.json are: main.js and index.html and both are in the root dir.
Is there a step here that I am missing?
Edit
I realized that the application is looking for the css file in Resouces/app directory. Is it the responsibility of the build tool to include the css file, or should I include it manually? If I have to take care of this, did I even needed to install bootstrap from npm?
Check your package.json file: is bootstrap listed as a dependency? Probably not since it doesn't look like you are using the --save param:
npm install bootstrap --save
I'm no Electron hero: I happen to be working on a project using fs-jetpack at the moment. I deleted the fs-jetpack entry from from my project.json and did an OSX build using electron-packager. On launch I got a script error about missing "fs-jetpack'. From that I conclude that the packager uses the 'package.json` to know what to include. Maybe I'm wrong? I have "--prune=true" as one of the packager params. Maybe without that it includes everything?
Also, I am surprised that this line works for you:
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
but perhaps you are using a different folder structure where the index.html file is not in the app directory?
I need some help with Gulp. I haven't used Gulp very much, so please forgive me if this is a silly question.
I'm fascinated by the idea of just doing a npm install bootstrap in order to get plug-ins etc. for my projects. But I can't seem to figure out how to I'm supposed to access them after the installation.
I want to use Twitter's Bootstrap framework, but as I haven't had the time to teach myself sass yet, so I just want the normal .css files in my project. When I do an npm install bootstrap it installs in ./node_modules/bootstrap. So what is the best way to import just the .css files to my src/css/ folder while keeping it up to date with npm update (if I'd ever want to update it)?
(Obviously doing <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> would be plain wrong?)
I guess I could just add it as a git submodule as an up to date version is available at GitHub - which would accomplish what I'm looking for.
I suppose I'm supposed to do an import 'bootstrap'; or require('bootstrap') but I'm at a loss, so please help me...
If you're just using Gulp on its own, then your best bet would probably be to copy the file to your output directory:
gulp.task("bootstrap", function() {
// This copies the entire folder structure - you could just use one file if you wanted
gulp.src("./node_modules/bootstrap/dist/**/*")
.pipe(gulp.dest("./dist/bootstrap/"));
});
Or concatenate it into your output files using gulp-concat:
var concat = require("gulp-concat");
gulp.task("concat", function() {
return gulp.src([
"./node_modules/bootstrap/dist/css/bootstrap.css",
"./src/my-awesome-styles.css"
])
.pipe(concat("style.css"))
.pipe(gulp.dest('./dist/'));
});
Alternatively, if you're using a module bundler like Webpack, you can import it through your JavaScript (assuming you have the css and style loaders installed and configured, or their equivalent in whatever tool you're using):
import "bootstrap/dist/css/bootstrap.css";
I guess that you just need to call the relative path for the bootstrap file and this should take the latest compiled file whenever you receive update through npm update.
I recommend you to go through this to understand about the file stucture:
https://www.npmjs.com/package/bootstrap
I would never recommend to use import 'bootstrap'; command.
And, adding require('bootstrap') into the Js file which is main entry point for the JS is same as having installing packages locally.
Note: Node packages follows Semantic Versioning guidelines hence you need not to worry. Just an idea use "npm install bootstrap --save" >> this command creates entry into package.json file as "dependencies.
Hope this helps!
I am trying to figure out an effective way to bundle and distribute various dependencies (node modules and/or "client"-side scripts and framework like Angular) with my Electron App.
Although the basic approach of npm install module-name --save works well for development, it is not so good in the end when it comes to minimizing the size of your app and using minified resources at runtime. For instance, virtually all npm packages (including node modules) come with a lot of "extra baggage" like readmes, various versions of components (minified, not minified, ES2015, no-ES2015, etc). While these are great for development, all these files have absolutely no need to be included in the version you will be distributing.
Currently there seem to be 2 ways to sort of address the problem:
Electron Builder recommends using 2-file package.json system.
Any dependency that is used during development only should be npm-installed using --save-dev and then prunning should be used when building the app for distribution.
In that regard I have several questions:
I am not quite sure why there is a need for 2-file package.json system if one can install dev-only modules/ dependencies with --save-dev and then use pruning during the actual app build/compilation?
Regardless of which method above is used, you still end up with full npm packages in your app, inclduying all the miscellaneous/duplicated files that are not used by your app. So how does one "prune" so to speak the npm packages themselves so that only the actual files that are being used at run-time (like minified scripts) get included?
Will using Bower for "client-side" packages (like AngularJS 2, Bootstrap, jQuery, etc.) and using npm for node modules (like fs-extra) be a better option in as far as separation of concerns and ease of bundling later?
Could WebPack be used to produce only the needed files, at least for the "cient-side", so that only real node modules will be included with the app, while the rest of it will be in the form of web-pack compiled set of files?
Any practical tips on how this bundling of dependencies and distribution should be accredited out in practice? Gulp-scripts? Web-pack scripts? Project structure?
Thank you.
I am still in the learning curve of adopting the best practices in code deployment. But here is my starting list of what is recommended.
Yes, npm install --save-dev is the first easiest thing to isolate dev and build specific packages. This includes gulp/grunt/webpack and its loaders or additional packages. These are used only for building and never in the code that actually is run. All packages used by the app should be installed with npm install --save so that it is project level available. So, in production, you would no npm install --production in machines which will not install dev packages at all. See What's the difference between dependencies, devDependencies and peerDependencies in npm package.json file? for more info.
While the original recommendation was to use bower for client side and npm for server side, both can be installed using npm too. After all, both does the same job of managing the packages and dependencies. However, if web pack is used, it is recommended that npm is used for client side dependencies also.
package.json should be thought of managing the dependent packages only and not for building. For building and picking only the required files, you need task runners like gulp/grunt or bundlers like web pack.
While gulp/grunt is very popular for build automation which includes bundling all dependent javascript in file and minifying them in to one file, webpack/browserify is a better option as it supports module import. Module import is intuitive way of require one module in another in node js type of coding
var util = require('./myapp/lib/utils.js') This is powerful way of mentioning the required dependencies in the code. The web pack builder runs like gulp as build process. But instead of looking through html file for all js files, looks at starting js file and and determines all dependent code mentioned by the require statements recursively and packages accordingly. It also minifies the code. It also loads css and image files in one bundle to reduce server trips. If needed, some modules can be configured to be loaded at runtime dynamically further reducing page load. NPM vs. Bower vs. Browserify vs. Gulp vs. Grunt vs. Webpack discusses this at length.
Webpack can be used to bundle client side app optimally while server side need not be bundled or minified as there is no download.
In web pack, though you can mention dependent modules with lib file path, the recommendation is to npm install all dependencies and mention the module name. For example if you have installed jquery, instead of giving path like /libs/jquery.min.js, you can mention as 'jquery'. Webpack will automatically pull the jquery lib and dependencies and minimise it. If they are common modules, it will be chunked too. So, it is better to npm install dependent packages instead of bower install.
ES2015 provides lot of benefits during coding time including type checking and modules. However all browsers do not yet support the spec natively. So you need to transpile the code to older version that browsers understand. This is done by transpilers like Babel that can be run with gulp. Webpack has in-built babel loader so web pack understands ES2015. It is recommended to use ES2015 module system as it will soon become the defacto way of coding and since there is transpiler, there is no worry of this not being supported in IE8/9.
For project structure you could have
server
client
src containing js files
dist containing html and build files generated
webpack.dev.config.js and webpack.prod.config.js can be at root level.
I have found that this area is an ocean and different schools of best practices.This is probably one set of best practices. Feel free to choose the set that works for your scenario. Look forward for more comments to add to this set.