I am new to React and recently joined a team and my first assignment was to set up a react project without using create-react-app because as team lead told me custom template makes easier to put react into production. Then, the question is how about create-react-app helping us with all of the setup for us and if we want to customize the CRA we can use npm run eject. So, why should we create our own template?
On the contrary, it's pretty hard to setup a React application without a template.
You can check Creating a Toolchain from Scratch at React docs which refers to this guide.
Your own template should configure package manager, bundler and compiler, it's not so trivial. Best suggestion would be extending CRA by cloning the repo or running yarn eject and continue from there.
I have an existing react application built with create-react-app version 2. I understand that I'll either have to eject it or use a tool like nwb to publish it to npm.
Could someone tell me if I can use npm on an existing project. From reading the docs it seems I have to create a new project using the command 'nwb new react-app nwb-thinking-in-react''. But if I already have a project can I just publish using nwb or would I have to copy my files into the newly created project created by the nwb new react-app nwb-thinking-in-react'command .
If you could also tell me how I would achieve the above using a project written in TypeScript, thanks
Thanks for your help.
I'm looking into creating an app with typescript and angular 1.6.0. But everywhere I look is using webpack, babel, grunt, gulp, there is no single consensus on which is the best way to proceed with an app like this.
Anyone got any hints?
Thank you.
Do you have a specific need for using angular 1.6.0? As opposed to creating an angular2 project?
You can get more information here: Angular-cli
Angular cli currently includes webpack and you will not need to use gulp or grunt at all. In addition to the angular cli bundling your app together it allows easy build for Ahead of Time Compilation and tree shaking. Having these two features is nice for when you are ready to deploy your application to a production server you can bundle the application into a small package and serve a small amount of JS files.
Using the angular cli also helps you to code with best practices within an angular2 application. You generate new components/directives/pipes with a simple ng generate [component] [name] command.
I would strongly suggest reading through the angular quickstart for ts guide located here: Angular-Quickstart
Also, if you do not want to generate your own projects using the angular-cli. There are various templates online that you can start your application with.
Good luck!
If you are planning to start from scratch, then why not Angular2 ?
My suggestion is Typescript2 + Angular2 with webpack. As stated by #Andy Angular-cli is good to go.
i have some angularjs file that has RESTAPI access to a third party service.
say, i have multiple java applications that need to use the same angularjs file.
what is the best way to share the file.
basically, in the olden days (i am talking about back end code), we would write an application that is deployed as a service and all other applications use this service. how do i achieve this with angular.. please keep in mind, i was mostly a back end developer and entering the new front end world
thanks
I would recommend to use Bower for maintaining your reusable components. Develop standalone functionality in their own modules, doesn't matter whether they're directives, services or whatever Angular components, and then install them as Bower dependencies into any of your separate Angular applications.
Bower has documentation on creating packages, and Brian Ford has written a nice (albeit a bit outdated at places) tutorial on writing reusable Angular components using Bower.
So, basically your workflow would go like this:
Start developing your module. If it is something already existing, you can just pull it out of the current place.
mkdir your-component-name
cd your-component-name
$editor your-module.js
Once you have your-module.js started (no need to finish development first, it's actually even better not to, if you're developing a completely new component), it's time to initialize your Bower component.
bower init
You will be asked for some initial settings, like component name (defaults to the directory name, e.g. your-component-name), initial version number, main file (should most likely be your-module.js) etc. For most of the cases the default value is just fine. After bower init has been successfully run, you will have bower.json that might look somewhat like this:
{
"name": "your-component-name",
"version": "0.0.0",
"main": 'your-module.js',
"license": "MIT",
"ignore": [
"**/.*",
"node_modules",
"bower_components",
"test",
"tests"
]
}
And of course you could do all this manually, but it's nice to use the bower init helper tool.
Continue development. If you have any external dependencies, you can add them also with Bower:
bower install external-dependency --save
Finished with development? It's time to publish your component so that it can be used in your applications. If you haven't already initialized your Git repository, start with it:
git init .
Add your work, commit and tag it:
git add <your-component-contents>
git commit -m "v0.0.0"
git tag v0.0.0
This is the part, in addition to the value of version property in your bower.json (note: Brian Ford's tutorial is talking about component.json - that is unfortunately outdated stuff), where you will be able to maintain your component pretty easily within all your applications. Need a change? Just do it, bump up the version number, commit, tag and run bower update where needed.
Next step is to publish your code into a Git repository, for example GitHub
git remote add origin git#github.com:your-github-user-name/angular-your-component-name.git
git push -u origin master
Then the component can be installed:
bower install your-github-user-name/angular-your-component-name
The component can even be installed from a private repo, for example if you do not want to publish the component outside your company (see under heading "Bower Package Stewardship" in Brian Ford's tutorial for more details):
bower install git#github.com:your-github-user-name/angular-your-component-name.git
# or from any other arbitrary git repo
On the other hand, if you do wish to publish your newly created component, you should think about registering it:
bower register angular-your-component-name git#github.com:your-github-user-name/angular-your-component-name.git
So it could be searched for, and would be easier to install:
bower install angular-your-component-name
Start using your component(s) in your Angular applications. And whenever you notice a bug/missing feature with one of your apps, you can fix your component, do a new version release, and then update your applications one by one.
And then there also is npm that you could use instead of Bower. The workflow is again pretty much the same, of course differing from the tool specific parts, but otherwise no big differences. I won't go into npm packaging details now, though, just thought to mention also that as an alternative tool.
SOLUTION 1 :
This can be acheive exactly the way you described.
Deploy a Service AngularJS app (that has all your services)
for example : tomcat7/www/myServiceApp
All your needed shared will be therefore into myServiceApp/js/myShareService.js
On your apps that need to access to it, your can reference all JS files (and others) like that <script src="../myServiceApp/js/myShareService.js"></script>
Of course with that solution, both services shall be deployed on same WebServer
Solution 2:
I personnaly prefer this solution with involves Continuous integration.
I copy all shared resources on the first step of the continuous integration to my app dir so every app is independent.
In Angular we separate our app by modules which is equivalent to a package in Java. Let's say you wanted to create a package which you can re-use for other Angular JS apps.
Sample
External Package
angular.module('my-awesome-app', [])
.service('FooService', function () {
// Awesome code(s) here
});
App Package
angular.module('another-app', ['my-awesome-app'])
.controller('AppController', function (FooService) {
// Awesome code(s) here
});
instead of using import we set my-awesome-app as a dependency for another-app (which why we put it on the array) so you can call its service.
Create JS file containing Angular Module which in turn contains Factory to expose API. Minify your file and use it either thru URL or direct inclusion into your project.
In my root folder 'Client' I would like to put an 'app' and 'test' folder inside the 'Client' folder. But I have no experience wether this works fine when adding libraries/generators to each of the folders.
Should there be a problem or what is the advised way to do it right that my testing works correctly?
I find a good way to get started is by using npm init from your terminal. It will create your packages.json file. Ideally you would have a basic layout like this:
app
-css
-images
-js
-controllers, views, services, directives, ect
-libs (third party libs from bower)
tests
-e2e
-unit
node_modules
-modules installed by npm
I created a angular template I like to use less the test folder. you can access it here:
https://github.com/breck421/angular-template. For example you would just add a test folder at the root.
use yeoman for scaffolding, however it requires installing both npm and yo.
http://yeoman.io/gettingstarted.html
npm install -g generator-angular
There should be no problem. But here are some guidelines:
http://www.jacopretorius.net/2013/07/angularjs-best-practices.html
Yeoman angular-js generator providing a good start structure with some nice grunt tasks: https://github.com/yeoman/generator-angular
These references may be useful if you are building larger apps with angular:
Best Practice Recommendations for Angular App Structure
Discussed at length here