When using the yeoman backbone generator, I am not clear on how the grunt tasks work.
Where does grunt server run the application from? It appears to run from the .tmp folder.
Where does grunt server:dist run the application from? It appears to run from the dist folder, but in my case the app does not launch correctly. It is trying to require HomePage.js which is not found.
Where does grunt server:test run from? It runs "watch:livereload" and then does not launch a browser.
When you use grunt server, you run your application from app/ dir. app/ is where your pure, non-compiled, non-minified source code lives. You don't need to change anything inside the .tmp/
When you use grunt server:dist, you build your application from app/ to dist/ and run it from dist/. dist/ is your distributable application.
If you have a js error with grunt server:dist and not grunt server make sure you put your js link between
<!-- build:js({.tmp,app}) scripts/main.js -->
<script src="scripts/main.js"></script>
<script src="scripts/templates.js"></script>
<script src="scripts/HomePage.js"></script>
<!-- endbuild -->
Because the build process will concat all these files and build a new one (scripts/main.js) without copy the content of app/scripts into dist/scripts.
grunt server:test run from app and basically does enough to create and serve your application for your test framework, Mocha, to execute your tests. That don't launch a browser because it only serve your application for your test framework.
Source: http://net.tutsplus.com/tutorials/javascript-ajax/building-apps-with-the-yeoman-workflow/
Related
I am trying to deploy this react project https://github.com/tahnik/react-expressjs
and use apache server for static file. The example that I know that is working is on Angular, on angular we just run ng build --prod and this will create a dist folder where there is an index.html. On apache, we just serve the dist folder. But here we use React with webpack that not contain dist folder with an index.html so I don't know how to do that on your project.
PS : Sorry for my english, it's not my native language
Thanks
There is no index.html because it is a server side rendered application. In the repository you posted, the whole project is meant to be running as a server side application, there is no index.html file. Everything is served from express as you can see here.
When you run npm run build:client it just creates the js/css files. You would need to:
Create your own html and add css and js to it.
Add html-webpack-plugin to generate the html with all the css/js files already on it.
If you don't want to do that. You simply run npm start after your npm run build and the server will start. now you need to proxy from apache to this addr:port.
I am about to develop a web application. I will use this theme- http://startangular.com/product/flatlogic-angular-material-dashboard/ for admin panel. I already installed it on my local machine following the instructions. But this is my first time of installing a html theme like this using command lines (npm, gem and gulp).
I also noticed that all the AngularJS admin panel theme are has to be installed in that way. I mean using npm and other commands. Installation is fine. When I run this command
gulp serve
It opens the browser and show the admin panel. But the problem is I do not understand the project structure.
Admin panel is working when I serve gulp. But what I want is I just want to access without serving gulp. I mean I want to move it to xampp. Then integrate with a framework(PHP). So for now when I access directly, it is not working. What I want is I just want to have simple project, something like this
/project
========
/css
/js
/view
How can I build them into it? I mean using command lines. For now I have to serve gulp to access my project. To convert it manually, I checked the index.html and there are a lot of syntax commented I am not familiar with.
eg
<!-- build:css({.tmp/serve,src}) styles/vendor.css -->
<!-- bower:css -->
How can I convert the Angular theme into simple project to send to server for deployment? Can it be done from command lines?
Now my project is under
c:/xampp/htdocs/material_dashboard/angular-material-dashboard
When I access this
http://localhost/material_dashboard/angular-material-dashboard/src/
It shows nothing. Just white screen. No error in browser console as well.
When I access this
http://localhost/material_dashboard/angular-material-dashboard/.tmp/serve/
It is showing these errors.
All status code 404 returns.
How can I access the project without serving Gulp? From which url can I access?
Development server
Angular applications are mix of JavaScript, HTML, CSS and every paths is relative to the root of application - index.html.
In this case copy contents of dist folder. Copy whole dist folder and deploy it.
Development server just tries to simulate real one production server. If it is working on development - that one that is executed over gulp server it should also works on production environment.
Production environment
It is time to go straight with application. There are only two major steps
build it with gulp build (of course if you are using gulp and there is task like that)
copy content of the builded directory to production environment (that steps is also called deployment)
CORS issue?
AngularJS application and the backend should be executed (should run) on the same protocol, domain and port address to avoid CORS policy rules.
I maked angular project. I used this generator:
https://github.com/swiip/generator-gulp-angular#readme
I have serwer and domain. My question is: How publish this working project on serwer? Should I use Apache http?
Since you used Gulp, you can check its docs to find out exactly you can build your Gulp application and deploy it to server.
On your command line run this in your working directory of the app
gulp //to build an optimized files to be deployed on to the server
Now in your dist folder in your root of your working directory, you'll find all the files and folders that have been created by gulp task default.
Now you can deploy this on with Apache or node or Nginx or any other server you want. Simply paste all the files to the to the
path/of/the/root/on/server
You can also preview your app the browser and watching for files changing and auto-reloading the browser to review changes by running
gulp serve
More grunt tasks here.
I've installed the iOS and Android build tools for Cordova and after I have run cordova build in my main directory I get an empty www folder. My Angular source is normally managed by bower, should I manually copy them into the source directory for the new build?
Cordova Documentation for Cordova Build Command
The cordova prepare step (which should run when you use cordova build), copies files from your project-wide www/ folder, and then compiles the project. When I use grunt or gulp with my ionic/cordova project, I build my javascript/html project into the main www/ folder before running cordova build, which would include copying/concatenating bower dependencies.
How can I create a simple deployment process using git where only my minified/concatenated js/css files are on the production server?
I am building an angularjs/laravel app with bootstrap-sass and ideally don't want to deploy any un-minified (source) files if possible. I am using bower and gulp tools as well if that helps.
The idea is to have 2 sections in your code base:
All the files you use for development - js, css, htmls etc (with their folder structure)
A folder called 'Dist' (stand for distributed)
And have a grunt task (let's call it 'grunt build') that perform set of tasks over your development code base: minified, uglified, image compression, removes unnecessary file and put the output in Dist.
Once grunt build is done, you need to deploy the Dist folder to production, that can be done in many ways (holding a separate git repo for production is and every new commit is a new version is a good option)