I currently started a new project using create-react-app, but I'd like to add some minor custom configurations to my webpack config. (automatically address .scss files as .module.scss, etc)
As far as I learned, the only way to do that it running eject, which would allow me to configure babel\webpack myself.
I was wondering, what caveats could that have? basically, why WOULDN'T I wan't to run eject?
Thanks!
DO it, and see it for yourself, create new project in another directory and experiment with it; eject make things look a little more complicated, but it's OK, its like taking a look inside the hardware of your computer.
However if your project directory is under version control, you can reverse the eject too
Related
I'm working on a project built by someone else. I know it was bootstrapped by create-react-app because it says so in README.md.
However, I'm not sure if it has been ejected or not. There are many posts out there teaching you how to actually eject it, but I failed to find a way to check it in the first place. Any help is appreciated!
Some immediate giveaways that a create-react-app project has been ejected:
The dependencies field in package.json no longer contains react-scripts. Instead, it is populated with many additional packages like Babel, Eslint, Jess, Webpack and various Webpack loaders.
The absence of eject script.
The start, build and test no longer follows this format react-scripts start, react-scripts build etc.
A new directory named config appears.
Just sharing because you may or may not see all of these signs in your project as they were probably ejected a long time ago. I hope no one will spend two hours wondering why a certain package didn't work only to discover that the project has been ejected and the package only works with unejected ones.
Many thanks to #YuryTarabanko!
So I tried creating another project using CRA and ejecting it. Right after the ejection, a new directory called config popped up and there were some modifications in other directories, too.
Then I took a look at the project I'm actually interested in. The config directory is right there, with a structure similar to that config dir in the new project that popped up after the ejection. So I'm sure this project has been ejected, too!
Edit:
As Yuri pointed out in the comment:
The most noticeable difference IMHO would be the absence of eject command in package.json#scripts section though ;)
I somewhat agree with the script in package.json, but it could have easily been removed. If the project is in a repo, you should be able to look at the history of a few files to be certain.
why there is need to create a React app from scratch with Webpack and Babel if create-react-app automatically adds them? I am kind of new to this thing could someone please help me to understand this thing
Because some people might not want the setup that create-react-app provides.
There are many different ways to set up a project, you can do it from scratch, by using someone elses's template, or using a CLI tool like create-react-app.
The choice is yours, but the recommendation for beginners is to just use CRA as it is the simplest and gets everything working together nicely for you to just get building!
I've built an AngularJS app. I scaffolded my app using bower and yo. Since I want to make it to production now, I'd like to know if there is a way to run a command from the cmd and generate like a distribution folder with all my dependencies in. I think I saw somebody doing that, but can't remember where.
I ask for this, because everything is in /bower_components and in their own folders, so It would be tedious to make it manually. Thanks in advance for your help!
I'm trying to set up a client-side app workflow with yeoman (http://yeoman.io/), and as I'm coming from Rails background, I'm used to the niceties of the asset pipeline, which is backed by Sprockets (https://github.com/sstephenson/sprockets).
I'm struggling to make all the parts play nice with each other, and already spent a few hours trying to figure it out.
The first question that comes to mind is, is there a well established (e.g. convention over configuration, like in Rails world) way of developing a client side application with yeoman? Some definitive guide (besides the basic webapp-generator guide), perhaps?
Some suggest using requirejs (which I rather not use, because while it simplifies things in development, I'll need to jump through hoops to package the app (e.g. use Almond.js or AMDclean.js, or incur the unneeded overhead of requirejs).
My setup is:
Coffeescript, Backbone + Marionette, Handlebars for templates and ZURB Foundation with SASS.
What I'd like to accomplish in the end is the following setup, while using bower for managing the 3rd party dependencies:
In development:
Have something like Rails' manifest for javascript, so I can declare the order of dependencies, which will exploded into the the index.html
For all .scss files a .css entry added to index.html
Each file watched and compiled when needed
In production (dist):
All .scss files compiled, minified and concatenated to app.css
All bower files concatenated and minified to vendor.js
All application coffeescript files compiled, minified and concatenated to app.js
All templates compiled, minified and and concatenated to templates.js
index.html modified to include only those four files.
Is there something like this setup available?
I'm also open for suggestions and/or other alternative workflows.
Yeomam won't get you as close to a Rails workflow as you might expect. My two cents is that you take a look at something like Middleman has it does what you want out of the box.
Yeoman way
Using generators
You can use Yeoman generators and try to find out the combination of generators that will better suit the stack you are looking for, from what you describe I might take a look at:
webapp
backbone
maryo
At this point most of your requirements (both development and production) would be fulfilled:
a well defined project structure
compile coffeeScript and .scss
watch and compile
generators for model, view, collection, ...
compile and minify all files for production
You can use multiple generators to customise your own stack, every time that Yeoman detects that a generator overwrites a existing file it will prompt what to do, and you should be able to manage the conflict by yourself. Some framework-generators will obviously clash (it wouldn't make sense to try to use a angular generator on top of backbone).
Fine tuning
You can use sub-generators to scaffold more specific parts of your app, see Addy Osmani video.
Building generators
If you feel limited by some of the choices that a generator might impose (e.g. you prefer browserify instead of requirejs) you might want to fork a generator and add that as an option. You can even build a generator form scratch that will build your custom stack!
Grunt and Bower way
Yeoman is build on top of this two, but you can opt out at any moment and build your own stack using this two. You can add your dependencies through bower, and your tasks using grunt. There are plenty of examples that can give you some guidance, you could start with Yeoman webapp. There are also good examples at github like juanghurtado/puppeteer.
There are 3 files that you must keep an eye:
package.json — all you node dependencies go in here
bower.json — to manage the client dependencies
Gruntfile.js — here you define the tasks
Wrapping up
Maybe I'm stating the obvious but Yeoman does some magic work and helps you managing Grunt and bower, this magic only happens when you fully understand how this 2 work. So I would recommend that first you dive into some code and fully understand how Grunt and Bower work, and then you may use Yeoman magic.
Some other tools
You asked for some suggestions, here it goes:
gulp.js An alternative to Grunt. More you dive into Grunt more you will want Gulp (IMHO).
browserify An alternative to Requiere. Read this
assemble Static site generator for Node.js, Grunt.js, and Yeoman
Roman,
Answer for your first question, here is a guide on how to use Yeoman: http://code.tutsplus.com/tutorials/building-apps-with-the-yeoman-workflow--net-33254
If you want to use coffeescript by default, just pass the --coffee param
yo webapp --coffee
handling the assets order you can handle from the index.html file.
When you want to get the app ready for production just type the
grunt build
that will unify and minify all of your assets and throw it all dist folder.
To customise what you have in the build process you would have to write your own or customise the grunt build task, so that it will do exactly what you want.
Hope i gave you some useful information :)
Not an answer to my original question, but rather a pointer for someone who'd like to implement the same workflow I was looking for. I ended up writing a custom Gruntfile, using the grunt-injector to do the "explode the assets to the index.html" part, grunt-bower-install to add bower assets and configuring the grunt-usemin, grunt-contrib-concat, grunt-contrib-cssmin and grunt-contrib-uglify accordingly.
I was looking for a way to load and start OSGi Bundles on the fly during runtime into my system. However after finding Felix File Install, I thought this is problably the most elegant and easy working way.
Thing is: It's not working. ;-)
I downloaded the Felix File Install Jar and deployd it as an OSGi Bundle into my software.
It also starts with all my OSGi Bundles in Eclipse without any problems. However, I don't know where I should set the properties file (Tried to put them in the arguments box at eclipse's project properties. no success though).
Furthermore my Bundle isn't reacting when something in the directory is changing. Even when creating the default directory and manipulating its content, nothing happens. No Bundles get loaded. Somehow I have the feeling I have overseen something huge here, since it seems to work for most people just perfect with not that mch effort?
Would be really glad for your help.
Bye
NOTE: There is no Apache Felix installed. Only the felix file install jar. The OSGi is running on equinox...
They are system properties not program arguments for equinox. Use it like this :
-Dfelix.fileinstall.dir=/pickup
As per their documentation the default value for this is ./load.
NOTE: In eclipse add the above in the VM arguments