I have access to an Angular app in a Github repo. I'm added as a contributor. The developers are using Grunt and I want to work with one of the branches.
To build a dev. environment locally- can I do the following?
Create a project folder
Clone the github repo. to this folder
NPM install //from inside the project folder - will this read package.json and install Grunt and the other dependencies?
Run grunt build
Is this the standard way of setting-up local environments? I don't want to create a branch or push anything yet.. will get to that at a later point.
Any suggestions/ advice or tips ?
Related
Primarily, I'm trying to integrate a react application (Created and build separately) with Drupal.
Problem
Unable to install private package from Bitbucket using npm install git#bitbucket.org:user/shared-package.git in Drupal app, because no package.json found.
Implementation Details
Development Environment
To achieve this in development environment I run npm run build which produces the following content in dist directory.
Not going in the details of what are the roles of other files but to make the things work, I just need to copy bundle.js file and paste it inside a directory under app/web/themes/custom/abc_themes/js/.
This is okay for development environment to copy a folder from one project and paste it into another. However, for production environment it' not viable.
Production Environment
In production we thought to create a private package on Bitbucket, where through Bitbucket pipelines on every commit we trigger a build and push that build 's result into a separate repo (i.e. private package).
Here is the content that is pushed to the so-called private package. Since it's the entire react application (not a library) therefore when it builds it creates compiled js and doesn't contain packgae.json.
Now if I try to install this package throught npm install
code ENOLOCAL
npm ERR! Could not install from "bitbucket.org:user/shared-package.git" as it does not contain a package.json file.
That is obvious but to solve this I can't convert my project into a library. Because even if I convert it to a library, Drupal needs a build js file at the specified directory to work.
Expectation
Want to know if there is a way I could install that private package (that doesn't have package.json) into Drupal application.
OR any other way around to achieve the same.
NOTE: I know one solution could be to host the build file at some CDN and pull it from there. But problem is, the Drupal app might be running behind a corporate network and users won't be able to access the internet openly. Therefore, we want to make the react app a part of build process, so once Drupal is served, react application would be a part of it already. No loading at runtime.
I have a question, I want to use angular 2 in maven project, and as you now the modules should download with ( npm install or ng new .. (cli) ).
The problem is if I generate the war file with all this modules, it will be very large because of the presence of all the nodejs modules.
In one of Github example they install this modules with ( npm install ) and finally goes to the home directory and run spring-boot:run
I want directly deploy my war file, so my question is : i should generate the war file with the all the modules and dependencies of nodejs or there is another solution ?
Three ways:
add all node_modules dependencies in to your version control, so source is always there, or copy necessary js libraries manually in specific source folder, like angular.min.js and so on (if your node.js is not available on your server, by security reason)
create execution goal inside pom.xml, something like
How to deploy a node.js app with maven?
use https://github.com/eirslett/frontend-maven-plugin and check existing examples, I am sure your case is straight forward
I want to setup a environment on my machine to learn AngularJS. I saw in the videos of egghead.io where he keeps typing AngularJS code and when it refreshes through a server and displays the changes in realtime in the browser. How to do that? I see WebStrom logo in the videos but that's it.
You will need a server to setup your files. The videos you saw might have used browser-reload plugin which watches the files for changes and refreshes the page as soon as there's a change in any of the files.
You can use yeoman (and one of the generators) for project setup (for scaffolding basically). You will need to install NodeJS first which will install NPM (node package manager) with it. Then you can install YEOMAN and use the generator respectively. My recommendation would be generator-gulp-angular.
See the readme for the instructions, but basically you'll have to run these commands in command prompt after you've installed NodeJS properly.
npm install -g yo gulp bower
the above command installs yeoman,gulp and bower respectively
npm install -g generator-gulp-angular
the above command installs the gulp-angular yeoman generator
Then you can create a directory, say 'testDir' and navigate into it. I.e.
cd testDir
Then run
yo gulp-angular
You'll be asked to select desired technologies. Once you're done, you can run the following command to see it working (with live reload)
gulp serve
not sure what video you're talking about but it sounds like he/she has a gulp or grunt task that is watching for changes and then livereloading your browser. It could be either
gulp-livereload (https://www.npmjs.com/package/gulp-livereload)
or
browsersync (https://www.browsersync.io/)
I have been trying out Codeship and Heroku for continuous deployment of an AngularJS application I writing at the moment. The app was created using Yeoman and uses bower and grunt. Initially I thought this seemed like a really good setup as Codeship was free to use and I was quickly able to configure this to build my AngularJS project and it offered the ability to add a deployment step after the build. There were even many PaaS providers to choose from (Heroku, S3, Google App Engine etc). However I seem to have become a bit stuck with getting the app to run on Heroku.
The problem started from the fact that all the documentation suggested that I remove the /dist path from my .gitignore so that this directory is published to Heroku post build. This was mainly from documentation that talked about publishing to Heroku from a local machine, but I figure this is all Codeship is doing under the hood anyway. I didn't want to do this as I don't believe I should be checking build output into source control. The /dist folder was added to .gitignore for a good reason. Furthermore, this kind of defeats the point of having a CI server somewhat, as I might as well just push the latest build from my machine.
After some more digging around I found out that I could add a postinstall step to my packages.json file such as bower install && grunt build which would re-run the build on Heroku and hence repopulate all the bower dependencies (something else they wanted me to check in to source control!) and the dist directory.
After giving this a try it became apparent that I would need to add bower and grunt as dependencies in packages.json, which meant moving them from devDependencies which is where they should belong!
So I now seem to be stuck. All I want to do is publish my build artefacts (/dist) the dependencies (/bower_components) and the server.js file that will run the site. Does anyone know how to achieve this with Heroku and Codeship? Alternatively has anyone had any success with this using different tools. I am looking for something that is free and I am willing to accept that it will not be production stable (won't scale to multiple servers etc), but this is fine for now as all I want to do is continuously deploy the app for internal testing and to be able to share the output with non-technical members of my team so we can discuss features we'd like to prioritise etc.
Any advice would be greatly appreciated.
Thanks
Ahoy, Marko from the Codeship crew here. Did you already send us an in app message about this? I'm sure we can get your application building on Codeship and deploying to Heroku successfully.
As a very short answer, the easiest way to get this running would be to add both bower and grunt to your dependencies in the package.json. Another possibility would be to look for a custom buildpack with both tools already installed.
And finally you could also run the tools on Codeship, add the newly installed files to the repository, commit the changes and push this new commit to Heroku. If you want to use this, you'd very probably need to force push the changes though.
Feel free to reach out to me via the in app messenger (lower right corner of the site) and I'd be happy to help you get this working!
I found two ways to get this to work.
Heroku Node Custom Buildpack
Use the mbuchetics Heroku build pack. This works by basically re-building the app once it has been pushed to Heroku.
There were a few tricks I had to employ still to make this work. In Gruntfile.jstwo new tasks needed to be configured called heroku:production and heroku:development. This is what the buildpack executes to build the app. I initially just aliased the main build task, but found that the either the buildpack or Heroku had a problem with running jshint so in the end I copied the build task and took out the parts that I didn't need.
Also in packages.json I had to add this:
"scripts": {
"postinstall": "bower cache clean && bower install"
}
This made sure the bower_components were available in Heroku.
Pros
This allowed me to keep the .gitignore file in tact so that the 'binaries' in the dist directory and the dependencies in the bower_components directory were not committed into source control.
Cons
This is basically re-building the app once it is on Heroku and I generally prefer to use the same 'binaries' throughout the entire build and deployment pipeline. That way I know that the same code that was built, is the same code that was tested and is the same code that was deployed.
It also slows down the deployment as you have to wait for the app to build twice.
CodeShip Custom Script Deployment
Not being satisfied with the fact I was building my app twice, I tried using a Custom Script pipeline in CodeShip instead of the pre-existing Heroku one. The script basically modified the .gitignore file to allow the dist folder to be committed and then pushed to the Heroku remote (which leaves the code on the origin remote unaffected by the change).
I ended up with the following bash script:
#!/bin/bash
gitRemoteName="heroku_$APP_NAME"
gitRemoteUrl="git#heroku.com:$APP_NAME.git"
# Configure git remote
git config --global user.email "you-email#example.com"
git config --global user.name "Build"
git remote add $gitRemoteName $gitRemoteUrl
# Allow dist to be pushed to heroku remote repo
echo '!dist' >> .gitignore
# Also make sure any other exclusions dont apply to that directory
echo '!dist/*' >> .gitignore
# Commit build output
git add -A .
herokuCommitMessage="Build $CI_BUILD_NUMBER for branch $CI_BRANCH. Commited by $CI_COMMITTER_NAME. Commit hash $CI_COMMIT_ID"
echo $herokuCommitMessage
git commit -m "$herokuCommitMessage"
# Must merge the last build in Heroku remote, but always chose new files in merge
git fetch $gitRemoteName
git merge "$gitRemoteName/master" -X ours -m "Merge last build and overwrite with new build"
# Branch is in detached mode so must reference the commit hash to push
git push $gitRemoteName $(git rev-parse HEAD):refs/heads/master
Pros
This only require a single build of the app and deploys the same binaries that were tested during the test phase.
Cons
I've used this script quite a few times now and it seems relatively stable. However one issue I know of is that when a new pipeline is created there will be no code on the master branch so this script fails when it tries to do the merge from the heroku remote. At the moment I get around this by doing an initial push of the master branch to Heroku before kicking off a build, but I imagine there is probably a better Git command I could run along the lines of; 'only merge this branch if it already exists'.
I'm using Yeoman to generate out an angular app. Once I'm happy with my app, I run grunt which creates a production-ready version of my application in a folder called /dist at the root of my project.
I've then initialised this /dist directory as a Git repository with git init and pushed the files up to Bitbucket, where they currently sit right now.
What I'm asking is do I have to compile my production-ready app with grunt every time I want to make a commit? It seems I have to. I'm thinking this setup might not be the most productive way to do this?
Am I missing something, is there an easier and more productive way to handling this?
That workflow is odd.
Only source code should be in your git repository. Not the compiled/minified files. Source code is what matters.
When you colaborate with somebody else, they should run grunt tasks on their own.
Dist package should be created before deploy to production. Or on regular basis by the continuous integration server.