i am new in gruntjs. I have installed grunt. Also have app. I minified the code using grunt build. It created the /dist directory in which all minified versions of file is there.
How to run this distribution code(/dist) for production using grunt. Not able to figure it out. grunt serve command take /app directory by default
Use a package like grunt-contrib-connect (enter link description here). First install it:
$ npm install --save-dev grunt-contrib-connect
In your Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-connect');
// ...
// In your config object
grunt.initConfig({
// ...
connect: {
dist: {
options: {
port: 8000,
base: 'dist',
keepAlive: true
}
}
}
// ...
});
Then run your grunt task:
$ grunt connect:dist
And navigate to http://localhost:8000 (or change port in config).
Note: if you use watch, set keepAlive: false.
Related
How can transform my react project into script to connect it to html page?
I am a new one in react please be tolerant. My boss demands to get completed script to connect it to html page without node and etc. What shall I do? Thank you.
Please check this url:
https://blog.bitsrc.io/react-production-deployment-part-3-heroku-316319744885
Also, Please check these steps:
In package.json, added this line to the scripts
"heroku-postbuild":
"NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run
build --prefix client".
Then added this
"engines": { "node" : "[your node version]" } after scripts.
In index.js, put the following code after your routes set up
if (process.env.NODE_ENV === "production") {
app.use(express.static("client/build"));
const path = require("path");
app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build",
"index.html"));
});
}
I assume that you use git for version control and already install Heroku.
Open your terminal, then Heroku login -> Heroku create -> git push Heroku
master. If you do not get any error, you are a success to deploy your app.
Hope you will get it to work.
In order to get rid of node, you need to first build your project. If you've initialized your project with create-react-app, run this command:
npm run build
A folder named 'build' will appear in your project root containing your production app. Now the build folder is ready to build and you can serve it with a static server like 'serve'. To install 'serve' via npm, do this:
npm install -g serve
that's it! you can serve it now:
serve -s build
You can find out more about deployment here:
https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#deployment
by using create-react-app
https://create-react-app.dev/docs/getting-started
https://create-react-app.dev/docs/deployment
dev: npm start or yarn start.
prod: npm run build or yarn build.
Scenario
I've made react app as well as a express server for API and both are separate. I've not included react folder in express app. I'm looking forward to deploy it using pre/post scripts using PM2 but I'm having hard time achieving exactly what is in my mind.
Goal
I want to run npm install for both client and server as I might remove/add package if needed later.
I'm thinking like after npm install I want to build react app and then move that folder for serving to express( I don't know if it's possible to give directory path which is out of parent for express static contents).
Then I want to start the express server which will eventually serve react build files.
For now my directory structure is
.
├── client
├── ecosystem.config.js
└── server
I'm mostly confused as I don't came across any resource where this is achieved. Also I'm not sure if this is even possible with pm2 deploy scripts or I need to write my own bash script which will do some stuff then pm2 will only start server.
This is only what I did which seems totally wrong
ecosystem.config.js
module.exports = {
apps : [{
name: 'API',
cwd: 'server',
script: 'server.js',
args: 'one two',
instances: 1,
autorestart: true,
watch: false,
max_memory_restart: '1G',
env_production: {
NODE_ENV: 'production'
}
}],
deploy : {
production : {
user : 'node',
// host : '212.83.163.1',
// ref : 'origin/master',
// repo : 'git#github.com:repo.git',
// path : '/var/www/production',
'post-deploy' : 'cd client && npm run build'
}
}
};
Since you have both server and client together, I am assuming it is being developed in a monorepo.
For these kind of purposes I would suggest to go with yarn workspaces as it satisfies your first requirement on its own(npm install for both client and server).
To enable workspaces in yarn versions prior to 1.0, execute to enable it.
yarn config set workspaces-experimental true
Then add a package.json in the folder(workspace root) outside server and client folders along with whatever other package.json keys you require. Also install common dependencies directly here instead of installing them individually in both of the package.json files inside server and client. (Don't forget to delete node_modules folder inside them as a new one would be created in workspace root with all dependencies installed together during yarn install).
{
"private": true,
"workspaces": ["server", "client"]
}
Add the following to your server index.js file.
app.use(express.static(path.join(__dirname, 'public')));
app.get('*', (req,res) =>{
res.sendFile(path.join(__dirname+'/public/index.html'));
});
And add npm script to the package.json in workspace root.
{
...
"scripts": {
"start": "yarn --cwd client react-scripts build && mv ./client/build ./server/public && node ./server/index.js"
}
...
}
My idea for your problem :
You can combine package.json of both client and server.
I have some confuse with your question .
You can config as :
module.exports = {
apps : [{
name: 'API',
cwd: 'server',
script: 'npm run react && npm run express', //you must config npm run react && npm run express before use them
args: 'one two',
instances: 1,
autorestart: true,
watch: false,
max_memory_restart: '1G',
env_production: {
NODE_ENV: 'production'
}
}],
deploy : {
production : {
user : 'node',
// host : '212.83.163.1',
// ref : 'origin/master',
// repo : 'git#github.com:repo.git',
// path : '/var/www/production',
'post-deploy' : 'cd client && npm run build'
}
}
}
Tell me if it not solve your problem.
I am using yeoman as a scaffolding tool for my app and using yeoman angular generator for the same.
While scaffolding the app yeoman asks me whether I want to install SASS or not, but it doesn't give any option to include less and related grunt tasks for that.
Please help me if I am missing something here.
Here are the steps that I am following to scaffold my app.
npm install -g yo
npm install -g generator-angular
yo angular
Also tell me if it is possible to install the less related tasks and files separately after using the yeoman angular generator as a scaffolding tool.
First installed the grunt-contrib-less module.
npm install grunt-contrib-less --save-dev
Copy the less folder from "bower_components/bootstrap" in the "app/styles" folder. Than you need to update Gruntfile.
Add the following task:
...
less: {
development: {
options: {
compress: true,
optimization: 2
},
files: {
"app/styles/your_bootstrap.css": "app/styles/less/bootstrap.less"
}
}
},
...
You need to load the less task.
grunt.loadNpmTasks('grunt-contrib-less');
And as you can see this made a new your_bootstrap.css in your styles folder which will be linked in your index.html.
Help me understand how to connect my Angular-Jasmine-Karma stack to Jenkins. I have an Angular.js web app that I test with Karma (né Testacular) and Jasmine. It looks just like the Angular Tutorial. I want to test it using Jenkins Continuous Integration.
So far I have installed Angular, Jasmine and Karma according to the tutorial. I have installed Jenkins. I can get each working independently. From what I've gleamed, it seems as though Karma should output an XML file that Jenkins ingests, but Karma is not consistently outputting a file, and I do not understand this conceptually. At what point does Jenkins call Karma?
A good answer would outline the pieces needed to do Karma testing in Jenkins.
Just in case, here is my Karma config. It has been mutilated in the name of debugging.
module.exports = function(config){
config.set({
basePath : '../',
files : [
'app/lib/angular/angular.js',
'app/lib/angular/angular-*.js',
'app/js/**/*.js',
'test/unit/**/*.js'
],
exclude : [
'app/lib/angular/angular-loader.js',
'app/lib/angular/*.min.js',
'app/lib/angular/angular-scenario.js'
],
autoWatch : true,
frameworks: ['jasmine'],
browsers : ['Chrome'],
plugins : [
'karma-chrome-launcher',
'karma-firefox-launcher',
'karma-script-launcher',
'karma-jasmine'
],
reporters : ['dots', 'junit', 'coverage'],
junitReporter : {
outputFile: 'test_out/unit.xml',
suite: 'unit'
}
coverageReporter : {
type: 'cobertura',
dir: 'coverage/',
file: 'coverage.xml'
}
});
};
First, you need a karma.conf.js file that lists the following:
reporters: ['progress', 'coverage', 'dots', 'junit'],
junitReporter: {
outputDir: 'karma-results',
outputFile: 'karma-results.xml'
},
browsers: ['PhantomJS'],
singleRun: true
The most important item under the reporters key is junit. This is the add-on that will translate your Karma outputs into an XML file. Your test outputs must be in a specific XML format for Jenkins to parse it. You configure the output location of this XML file using the junitReporter key. In the browsers key, make sure you are specifying PhantomJS since it is most likely your Jenkins server will not have an instance of Chrome or Firefox. The singleRun key makes sure the Karma server is launched before tests are run and shut down when tests are finished.
Next, make sure all of the following node modules are installed on your server by running these commands:
npm install -g karma-cli
npm install -g karma --save-dev
npm install -g phantomjs
npm install -g karma-jasmine --save-dev
npm install -g karma-phantomjs-launcher --save-dev
npm install -g karma-coverage
Visit your Jenkins server through a browser. You can reach your Jenkins server at
http://server-ip-address:8080
Before moving forward, make sure you have the "
Environment Injector Plugin" and "Junit Plugin" installed. Once that is there, click on New Item on the left-hand side of the Jenkins homepage. Have the following parameters set for your job:
The "Properties Content" allows you to assign Jenkins a PATH on your server and allows you to use the karma keyword in the "Command" section below it. The "Command" section tells Jenkins to cd to the folder where your karma.conf.js file resides and start Karma.
If you use the outputDir and outputFile values in my karma.conf.js example above, then you can keep the "Test report XMLs" input value. Otherwise, change that to reflect the new path to where your XML results file will be generated.
Now, whenever you run this job in Jenkins, you'll be able to see whether or not it passed and also the line item results from your tests.
Do you use maven as a build tool? If so, take a look at: https://github.com/eirslett/frontend-maven-plugin. It runs the tests, so Jenkins can show the results.
I inherited a project that uses BBB (Backbone Boilerplate Buddy).
I am trying to modify the grunt file by adding this particular task that I noticed wasn't included in BBB. The following code is a snippet of the grunt-rev options. But when I
rev: {
options: {
algorithm: 'md5',
length: 8
},
files: {
src: ['../webapp/webapp.js']
}
},
grunt.loadNpmTasks('grunt-rev');
grunt.registerTask("debug", "rev");
Unfortunately, when I run the the bbb command from Maven, it always says it can't find the grunt-rev plugin. It has been installed globally on the machine by the way.
It shouldn't be installed globally, but locally. Try npm install --save-dev grunt-rev.