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)
Related
I have prototyped a ReactJS static app (no backend) on my local computer by following some tutorial. I have used create-react-app to generate my project. The next step (which is not part of the tutorial) is to upload that to S3 as a static website. I noticed that the node_modules folder is quite large (around 500 MB).
In my reading of other tutorials about static websites in AWS, some JavaScript libraries (jquery) are actually served using CDN, instead of being bundled with the app folder that is be uploaded to S3. Can that be done with node_modules as well so I can avoid uploading that?
Create react app comes with the tools necessary to develop and build your application.
develop
When you develop, you can run npm run start, it will run the project as a website and open it on the default browser.
build
When you are ready to deploy, use 'npm run build', it will produce a build directory with optimised code ready for deployment. You can copy the contents of the build directory into your S3 bucket.
https://create-react-app.dev/docs/production-build
You can also check the available commands in the scripts section of your package.json.
Then what happened to the node_modules directory
The build process is using webpack to build the project. it will only include the bare minimum files required to run your application. It will not include the entire node_modules directory.
You don't need to (and you shouldn't) upload node_modules. Your dependencies are compiled and the output file should be in your /build directory after you build your application. You just need to upload that directory to S3.
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 am working with EXTJS6/sencha cmd 6.1.
I am running sencha app build development on my application but it does not copy my javascript files to the build folder. I searched and learnt that QA & Production builds minifies the JS files and copy it to the build where as Development build does not. I believe, using copy task in build.xml we can copy the JS files in the build folder.
Since, the JS Files are copied in the build folder, I can not send the DEV build from build folder to Server.Can someone has an example or guide me on how to write the copy task in build.xml or are there any other alternatives?
Thanks,
gendaful
I believe that what sencha app build development has changed. in previous versions, it created a development build directory. Now, it just minifies the data in your root directory so that you can run it directly from there.
My workflow is now I just do "Sencha App Watch" and run from my root while doing development. When I want to test my production build I do sencha app build production and the folder gets created as before.
HTH's.
I am using gulp, bower, stylus for an angularjs application.
I am not using any Continuous Integration technology, git pulling code from repo manually when git push are made to master branch on bitbucket, considering this scenario :
Is it a good practice to include bower.json, package.json and
gulpfile.js on the production server and install dependencies
manually by npm install or bower install on server?
Is it safe to include gulpfile.js on the server?
Also, if using any Continuous Integration technology, what would be the best practice?
My .gitignore file is as follows :
node_modules
dist
.tmp
.sass-cache
bower_components
private.xml
nbproject
gruntfile.js
gulpfile.js
package.json
Add package.json and bower.json files to keep the track of dependencies that are being used on production server. However you should skip uploading gulp or grunt files as they are for local use only. They are not needed to be uploaded on production server.
EDIT :
If you use grunt/gulp for restarting your node server as well, like using nodemon from grunt/gulp, You may upload grunt/gulp file. In the end if you have structured your node server properly there is no harm putting grunt/gulp file on server, as these interact with your system before server starts.
You can use gulp or grunt task runner which pulls all the external dependencies such as Angular, JQuery and bundles them together. Then use the bundled file on production server. It will also reduce number of requests your browser needs to make to get those resources. For more info, read this article:
https://scotch.io/tutorials/automate-your-tasks-easily-with-gulp-js#javascript-concat-and-minify
I am about to start using Yeoman with Angular.js for a project that has PHP as the backend. I know I can use Grunt to minify all my files and get it ready for production. My question is, how do I handle that properly with Git?
Right now I have three servers (development, staging, production) and instead of uploading files with FTP, I just pull from my Github repository. This works fine, but with Yeoman and Grunt, I don't want all the files that is brings along for development, I just want the distribution files on my staging and production servers.
Is there a way to do this with Git?
The git subtree command is an option that should accomplish what you want.
Check out this page for more information and a few other options for deployment of the production code.