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

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.

Related

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

About MEAN 2 stack using angular-cli

I'm studying MEAN 2.0 . I need to do "ng build" before running "node server.js".
I would like to ask if do I need to do (ng build) everytime I changed something in my angular side? Because when I'm using only angular-cli, when I changed something and my server is still running. It will show the changes. I tried to change something but when I re-run my node server nothing happens.
Yes you need to do ng build before running node server.js.
ng serve :- serves on a server,
node server.js :- doesnt serve on the same port, it runs on the port you define in your server.js, it reads from the build folder, which will need updated fies.
Live reload wont work :(
You can
1. write tasks for it
2. write script in package.json which does ng build && node server.js
If you arranged your folder structure to be:
|_server
|_ server.js
|_ public (angular-cli project)
|_ dist
|_ src
|_ package.json (client)
|_package.json(server)
Considering you've the default angular-cli package.json,
Add concurrently using npm:
npm install concurrently --save-dev
All you would need is to add those scripts in server package.json:
"scripts": {
"client":"cd public && ng build",
"server":"ndoe ./server/server",
"start":"concurrently --kill-others \"npm run client\" \"npm run server\""
}
Now, all you have to do is:
npm run start

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.

node.js minimal setup and for what is the package.json?

So i start off with writing my own node.js app and the only thing i want is to include a package for saml.
So i was wondering what is the minimal requirement for my app.
I was just creating a node.js file and then i installed the package by:
node install some-saml-passports-package.
I got this warning after installation:
npm WARN enoent ENOENT: no such file or directory, open '.../mynodeapp/package.json'
I removed the package and created a package.json file. Which results in a parsing error because there was no content inside.
I have read that I only need a package.json when I plan to create my own package. Also I read something about local and global installation of package files in npm. Well, i need a bit of clarification for my doing.
What is the use of package.json?
Do I need it when I only want to create a standalone app in node with one dependency to an existing package?
Is it recommended even if I don't need it at all?
There is no minimum requirement for node.js application. The package.json is only required to manage your application for dependencies, module descriptions , handle npm scripts etc. You can install packages without package.json, just don't use the --save flag with npm install. E.g.:
npm install <package_name> - you can still run your node application without any problem. But I will suggest you to add a package.json file and add following:
{
"name": "<package_name>",
"version": "<version>", //0.0.1 for starters
"description": "",
"main": "<entry point of application>", // example: app.js , index.js etc
,
"author": "<your name>",
"license": "ISC",
"dependencies": {}
}
You can create this by adding it manually or just execute npm init in your project root directory and answer some basic questions in console.
Here are some useful links:
npm init
how to use package.json
The minimal file is:
{
}
Now you can start using commands like npm install web3 --save and they will save onto this file.
Create package.json via npm init command.
Package.json contains data about your project and what is more important for standalone app - it contains dependencies list. You can install all dependencies from package.json with npm install.
If you want to install package and save it in package.json type npm install package-name --save.

webpack-dev-server is not recognized

I get a web pack related error when I try to run "npm run dev" as follows
'webpack-dev-server' is not recognized as an internal or external command,
operable program or batch file.
I've attached the screenshot of the error from the terminal. As well as a screenshot of the generated log.
Log
Could you please check the package.json file whether it is installed or not.
If you find webpack-dev-server present under the development dependencies but still its not working try doing an npm install to reinstall the missing packages.
If not you could simply do
npm install webpack-dev-server --save-dev
executing this would save the package under node modules directory.
you could also configure webpack dev server to a custom command under scripts in package.json
"scripts": {
"start:dev": "webpack-dev-server"
}

Categories