We Keep Coding

Why I only see Read Me file for Git hub pages

I deployed my react app to Git hub and was trying to create GitHub pages URL.
I followed all the steps from here: https://medium.com/#isharamalaviarachchi/how-to-deploy-your-react-app-into-github-pages-b2c96292b18e
Made sure Sourse set to Master from root folder and created scripts:
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
And run npm run deploy:
See pic attached:
I have tried running npm run deploy and getting a message that it already exists.
I tried deleting the build folder and run npm run build again for no avail
Again my root folder on GitHub is set to Root, and this is a React project

I think you need to change branch to gh-pages on settings

Where is json.config file found in the root of the project?

I am new in development field.
I have already made an app in create-react-app.
But now I have been asked to submit json.config file..
It is mentioned that -
The file must be called config.json and must be stored in the root level of your project.
Here is the format of the configuration file:
{
"install": "npm install",
"run": "npm start",
"port": 3000
}
I am unable to find it in my project folders and dependency folders and files.

Create-React-App creates this file for you under the hood. So you don't have to setup it. You can open the terminal and write npm install and after npm start. That will open your web app in http://localhost:3000.
More details https://create-react-app.dev/docs/available-scripts
Edit: Dependencies should be inside the package.json in the root directory.

how to create production build in node js?

I am new in nodejs framework .I read the tutorial, but I want to know how to create a build in node js, in other words I need a script which create my build folder.
I follow these steps
create index.js in root directory add some code.
then add this line of code
import express from 'express';
const app = express();
app.listen(3000,function () {
console.log(`app is listening on 3000`)
})
in my package.json I added start and build script
"scripts": {
"start": "nodemon ./index.js --exec babel-node -e js",
"build": "mkdir dist && babel src -s -d dist"
},
when I do npm run start .my application run fine and I am able to debug also.
Now I want to deploy this application on production Need build.so how to generate build using babel
when I run npm run build I am getting error
src doesn't exist

You 'build' command is like 'mkdir ... && babel src ....', then in the photo it does not have a src folder. So you can simply create a src folder and move index.js to src/, or change the command to 'mkdir dist && babel ./ -s -d dist'. I did not test, but it should work.

Running a React app as a background process

I'm completely new to deploying front-end code and thus the question.
I have a React App which I need to run as a background process, however I'm a little confused about the how to do this.
I run a npm script
npm run build
to build, minify and serve the project on a server.
The relevant code for the build process is this.
"prebuild": "npm-run-all clean-dist test lint build:html",
"build": "babel-node tools/build.js",
"postbuild": "babel-node tools/distServer.js"
This is the code inside the distServer.js
import express from 'express';
import path from 'path';
import open from 'open';
import compression from 'compression';
const port = 3000;
const app = express();
app.use(compression());
app.use(express.static('dist'));
app.get('*', function(req, res){
res.sendFile(path.join(__dirname, '../dist/index.html'));
});
app.listen(port, function(err){
if(err){
console.log(err);
}else{
open(`http://localhost:${port}`);
}
});
This works and the project runs, however the moment I close my terminal the project stops.
The build process creates, three files,
index.html
index.js
styles.css
Now if I navigate to the index.html and open it in a browser, but naturally, nothing shows up. So I'm assuming that I'd have to run it as a node process. How do I do this on the production server and run it as a background process so that even if I exit the terminal the app continues to run.
I have checked this issue,
How to make a node.js application run permanently?
But this has a javascript file as the entry point, in my case it's a html file. I'm not sure how can I modify my scripts to run the front-end app permanently as a background process. Any help appreciated.

Your Javascript file (distServer.js) is your entry point – it's the file that you run to start your server. Your HTML file (index.html) is only served as a response to the requests.
babel-node is OK for development, but it's not suitable for production. You can precompile your Javascript files to vanilla Javascript, then use forever or pm2 as described in the question you already linked to in order to keep the server running even after you close your terminal.
How you organize your source files and compiled files is up to you, but here's one way to do it (quote from the documentation for an example Node server with Babel):
Getting ready for production use
So we've cheated a little bit by using babel-node. While this is
great for getting something going. It's not a good idea to use it in
production.
We should be precompiling your files, so let's do that now.
First let's move our server index.js file to lib/index.js.
$ mv index.js lib/index.js
And update our npm start script to reflect the location change.
"scripts": {
- "start": "nodemon index.js --exec babel-node --presets es2015,stage-2"
+ "start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2"
}
Next let's add two new tasks npm run build and npm run serve.
"scripts": {
"start": "nodemon lib/index.js --exec babel-node --presets es2015,stage-2",
+ "build": "babel lib -d dist --presets es2015,stage-2",
+ "serve": "node dist/index.js"
}
Now we can use npm run build for precompiling our assets, and npm run serve for starting our server in production.
$ npm run build
$ npm run serve
This means we can quickly restart our server without waiting for
babel to recompile our files.
Oh let's not forget to add dist to our .gitignore file.
$ touch .gitignore
dist
This will make sure we don't accidentally commit our built files to
git.

Angular-cli build (ng build) on Teamcity

I hope someone has already done this.
I am trying to set up a continuous build in teamcity for one my angular 2 project.
After done some research and I have followed the steps as follows:
Build Step1: installed the jonnyzzz.node plugin for the teamcity. (Now I can pick Node.js NPM from Runner type)
npm commands: I added install command
Build Step 2: Another Node.js NPM and npm commands: install -g angular-cli
So far so good
Now I wanted to build ng build as the third step and I am really stuck as I have no way to do this.
Any help would be appreciated.
Thank you.

Rather than changing your package.json you can use the node.js NPM plugin and the run command:
run build
build it not a default command for NPM so you need the 'run build' which is mapped to ng build in default ng-cli package.json
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
See image

In order to get ng build work from nodejs plugin for Team city, I have modified the package.json file.
In start replace the value with "ng build".
And from team city, npm build command will trigger the ng build command.

First start with the build agents where you can edit the buildAgent.properties file and define 3 environment variables. You should have the surrounding single quotes here or later on in your build definitions:
env.exec.node='C\:\\Program Files\\nodejs\\node.exe'
env.exec.npm='C\:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js'
env.exec.ng='%env.APPDATA%\\npm\\node_modules\\#angular\\cli\\bin\\ng'
The %env.APPDATA% is used here but some setups may be installed on the Program Files, in most cases the AppData will be the one to take.
Next you can define build steps for your project. Create these new build steps of type Powershell and set Script as Source Code. Inside the Script Source you can now enter:
Install Angular CLI
& %env.exec.node% %env.exec.npm% install -g #angular/cli
Install node_modules folder
& %env.exec.node% %env.exec.npm% install
Build and publish solution
& %env.exec.node% %env.exec.ng% build --environment '%env.build.environment%' --scripts-prepend-node-path
After this step production builds will create your dist folder which you can include into your Artifacts paths so you have access to it should you want to create seperate Deployment type build configurations
Some considerations to take into account here:
You could define the variables inside your however
different paths may be used on the build agents, which would brake
your builds
Make sure you have proper Clean-Up Rules in place, since node_modules
folders can get big really fast
Hope it helps out someone!