For example:
yarn add babel
bower install babel
I have application running without server (I don't plan to use NodeJS as my back-end). It is now pure-front-end double-click HTML file.
I tried to import browser.js into my HTML file to be able to process JSX.
Import with <script src="node_modules/babel-core/lib/api/browser.js"> does not work.
But, import with <script src="bower_components/babel/browser.js"> works.
Apparently, the codes are different. Since, Bower is dead and it suggests its users to use Yarn, how can the codes be different?
How can I use Yarn like I use Bower?
I have tested. There is no way ReactJS downloaded from package manager like Yarn or NPM work without server. At least any static-file server works.
In my case I ran yarn build, go to build directory, make sure the working directory is in the build folder, then run any server from there (root must be at the build folder). I use python3 -m http.server (because that is the only thing I conveniently use). I suppose you can use basic NodeJS HTTP as well.
I am not happy with the result, with fact that I can use CDN and Bower to serve React application as a single HTML file but I cannot do as such with React downloaded form the currently hip package manager.
Related
I'm trying to follow other people who had a similar issue like this one
Electron-Builder include external folder I wish i could be more specific on what my problem is, the reason is that i dont know whats wrong.
I am making a react app which has a server with an sqlite db and im trying to use electron.js to make it into an installable/executable
here is my dummy repo https://github.com/Juan321654/electron_react_with_build_installer_sqlite_db the master branch was just how to make electron work with react, the server branch is the one that i need help with
you can clone and just do npm i, npm run start to launch executable. npm run build to build
the code works fine in development mode and even after i make the build project with electron i can launch the executable and it works fine and it reads the data from the database, but as soon as i take the dist folder out of the project to send to someone or install the software, it stops working and it loads the app, but it does not read the data from the server/db, I am not sure if its missing node modules or the server folder, or maybe if im missing some kind of command in my scripts in the package.json?
With the expiration of Dartium that happened just a few days ago, I felt compelled to migrate from dart 1.24.3 to Dart2, even though it is still in dev.
I have although hit a few walls doing so, one of them being related to the architecture of my apps.
I run a nodeJs server, which also acts as a webserver with client side dart.
The problem that I experience with the new dart SDK is that in order for the .dart files to be read in Chrome, they must be served using webdev serve or build_runner serve.
Obviously, these 2 commands act as the file server, which is not what I want since I'm using a nodeJS server.
By using build_runner watch I think I am enabling the build and watch of the .dart files into .dart.js inside of the following directory :
.dart_tool/build/generated//lib
I am also able to serve them from my nodeJS server. What remains is the package directory, I can't seem to find where pub serves gets the following package files:
/packages/$sdk/dev_compiler/amd/require.js
/packages/$sdk/dev_compiler/amd/dart_sdk.js
Does anyone know what build_runner serve does to include them?
Thank you,
There are 2 options for using a different server during development.
Run build_runner serve on a different port and proxy the requests to it from your other server. This has the benefit of delaying requests while a build is ongoing so you don't get an inconsistent set of assets.
Run build_runner watch --output web:build and use the created build/ directory to serve files from. This will include a build/packages directory that has these files in it.
These files are served from the lib directory of the dart sdk itself.
Note that there is another option, which is to use the -o option from build_runner. This will create a merged directory with source and generated files, which you can serve directly without relying on any internal file layout.
I am building a React app in Rails and would like to try react-redux. I noticed that it doesn't offer a CDN nor a bower package.
The installation instructions recommend using NPM, but this is not a node project. I handle all my current assets through the Rails asset pipeline, a CDN or a bower package (via rails-assets)
Is there a way to install it without using NPM?
Is there a way to get NPM packages to play nice with existing asset pipeline packages?
You can also check out https://github.com/shakacode/react_on_rails. It's integrated with webpack which gives it a nice and familiar javascript flow.
They've also got a live example at http://www.reactrails.com/ and the code for that at https://github.com/shakacode/react-webpack-rails-tutorial.
I found that it is possible using react-rails in conjunction with browserify-rails. This blog article explains it pretty well.
Just run the command yarn add redux react-redux
This will add redux and react-redux to dependency as well as connect react to redux.
I am using rails 6 and it works fine with this.
add ruby related lib via bundle add and js related lib via yarn
Does Bower actually do anything else than resolve dependecies? I'm trying hard to understand how it is meant to be used, but I guess I'm missing some points...
Say, I have Bower package A, which depends on Bower package B. In my application I'm just interested in package A, since that's what I'm going to use. Of course, that means that somehow both packages must be loaded into the Browser, so that package A can work.
Using Bower I can just do bower install a and will then find both packages A & B in my bower_components. So far, awesome.
But now? Am I forced to find out myself (manually) which files from A and B need to be loaded in my HTML page? I don't think that the full bower_components directly shall be accessible via web, so I have to configure myself manually my Grunt (or whatever) build-file to copy the relevant files?
What am I missing here? If what I wrote above is true, what's the point using Bower when I still need to be aware of all implicit dependencies?
Bower manages dependencies, and it will add the correct files into your HTML if you use it with the --save (or -S) flag. You would need appPath set in your bower.json if your index.html isn't in the same directory.
$ bower help install
Usage:
bower install [<options>]
bower install <endpoint> [<endpoint> ..] [<options>]
Options:
-F, --force-latest Force latest version on conflict
-h, --help Show this help message
-p, --production Do not install project devDependencies
-S, --save Save installed packages into the project's bower.json dependencies
-D, --save-dev Save installed packages into the project's bower.json devDependencies
Additionally all global options listed in 'bower help' are available
Description:
Installs the project dependencies or a specific set of endpoints.
Endpoints can have multiple forms:
- <source>
- <source>#<target>
- <name>=<source>#<target>
Where:
- <source> is a package URL, physical location or registry name
- <target> is a valid range, commit, branch, etc.
- <name> is the name it should have locally.
```
You're actually not missing anything. Bower doesn't deal with loading your dependencies, just installing them. Loading them is something you have to do on your own. Also, there are a lot various ways in which people load there dependencies; the most common probably being Require.JS, Browserify (have too few credits to post links) and plain script includes in an index.html page. So, basically you have a few options here
You can just deal with load registrations manually. This would mean adding <script src="..."></script> tags to your index.html page, or adding registrations for dependencies and similar to your app.js if you're using Require.JS. Note that this step would mean that you'd manually have to look at each dependency, read documentation or bower.json files to figure out transitive dependencies and file paths.
If you're using plain script includes, you can use Wiredep to have that done automatically for you through Wiredep's inspection of the bower.json files of dependencies.
If you're using RequireJS (or similar) you can look at Yeoman's grunt-require-js to do this automatically for you.
Note that both 2 and 3 relies on library authors provide the correct output files. You might e.g. have to declare overrides or explicitly declare if you want minified or non-minified versions.
As for publicly allowing access to "bower_components", I find that this is the most common approach. What things there would you like to prevent access to?
I'm a recent bower user myself. And as far as I know the short answer is: YES, bower is meant to download dependencies, however, apart from being able to configure the bower_components directory to anything you like, the idea is that bower installed components won't be edited by you at all, if you want to include them manually, you type
bower list --paths
and this will list all the files you need to include from the dependencies (in relative urls).
You can also use bower-installer (npm install -g bower-installer) which allows you to copy the files you need to any path you like. With a fine grained controll, or choose the minified versions, for example.
Here's an example output.
C:\Users\german\test>bower install bootstrap
bower bootstrap#* not-cached git://github.com/twbs/bootstrap.git#*
bower bootstrap#* resolve git://github.com/twbs/bootstrap.git#*
bower bootstrap#* download https://github.com/twbs/bootstrap/archive/v3.3.4.tar.gz
bower bootstrap#* extract archive.tar.gz
bower bootstrap#* resolved git://github.com/twbs/bootstrap.git#3.3.4
bower jquery#>= 1.9.1 not-cached git://github.com/jquery/jquery.git#>= 1.9.1
bower jquery#>= 1.9.1 resolve git://github.com/jquery/jquery.git#>= 1.9.1
bower jquery#>= 1.9.1 download https://github.com/jquery/jquery/archive/2.1.4.tar.gz
bower jquery#>= 1.9.1 extract archive.tar.gz
bower jquery#>= 1.9.1 resolved git://github.com/jquery/jquery.git#2.1.4
bower bootstrap#~3.3.4 install bootstrap#3.3.4
bower jquery#>= 1.9.1 install jquery#2.1.4
bootstrap#3.3.4 bower_components\bootstrap
└── jquery#2.1.4
jquery#2.1.4 bower_components\jquery
C:\Users\german\test>bower list --paths
jquery: 'bower_components/jquery/dist/jquery.js',
bootstrap: [
'bower_components/bootstrap/less/bootstrap.less',
'bower_components/bootstrap/dist/css/bootstrap.css',
'bower_components/bootstrap/dist/js/bootstrap.js',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.svg',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.ttf',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff',
'bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.woff2'
]
after
bower list --paths
bootstrap[] shows all the files I need to include according to bower_components/bootstrap/bower.json
main:[]
part
Hope this helps! cheers.
I'd like to run my own bower server to start sharing a couple of internal modules across teams. I'm having a very hard time finding the information for running your own server. On the bower.io site there is this line
N.B. To run your own Bower Endpoint for custom packages that are
behind a firewall, you can use a simple implementation of the Bower
Server.
With a link to Bower Server
Do I simply clone that repo and 'run it'? I'm not a ruby guy at all so I'm not even sure what run it means.
That repo is a Sinatra app, so you need to git clone it, run bundle install in its directory, and run 'ruby application.rb`. Comment on this answer if you need more details.
There is also a node server, which I have never used and cannot comment on its quality - https://npmjs.org/package/bower-server
I guess there is a PHP one also - https://github.com/indieisaconcept/slim-bower-server
EDITS:
Some links for Ruby n00bs
http://bundler.io/
http://www.sinatrarb.com/intro.html