I'm new to React. I'm having some problems with react server. After starting the server by npm start if I work on the source code and make some changes, I have to stop the server and restart it to make that change available on the browser. Is there anyway to make it auto compile and refresh the browser on update ? (Like nodemon for node ?)
I had a similar (or event the same) problem and I changed starting command in the package.json file by adding following flags: --watch --watch-poll to the webpack-dev-server:
{
//...
"scripts": {
"start": "webpack-dev-server --env.ENVIRONMENT=development --content-base src/ --mode development --watch --watch-poll",
// ...
}
// ...
}
Now, using npm start and then changing src files I can see changes in the browser.
Please here https://webpack.js.org/configuration/watch/ for more options.
Related
I have been working with nextjs for a little now and I have noticed that the backend side does not hot reload when I make changes to the API, is there a particular configuration to make hot reload happen also for the backend? I have searched around the internet and found nothing about this problem.
You have to use a library such as nodemon or pm2.
npm i -D nodemon
Then in your package.json add this script:
{
"scripts": {
"dev": "nodemon --watch pages --exec next dev"
}
}
I am wondering what would the difference be between npm run dev and npm run start.
To my surprise, I could not find much information online about this topic.
Specifically, I'd like to know in the context of React and Next JS.
I noticed that with React, you can start your app by running npm run start, without the need of running a build first. On the other hand, Next JS doesn't seem to behave in the same way (but I could have done something wrong with the setup).
I tried running a new Next app using npm run start, as it's a default script in package.json, but it didn't work. It shows this error: *Error: Could not find a production build*
Instead, running npm run dev created a .next folder, and started the server on port 3000 with no issues.
Can anyone help me understand how this works?
TL;DR: In Next.js, next dev is used to run the app in development mode. On the other hand, next start is used to run the app in production mode, but requires next build to be run first to generate an optimized production build.
Development
When running the Next.js app in development, you'll want to use next dev:
next dev starts the application in development mode with hot-code
reloading, error reporting, and more.
Production
When building the Next.js app for production, you'll want to use next build:
next build creates an optimized production build of your
application. The output displays information about each route.
Size – The number of assets downloaded when navigating to the page
client-side. The size for each route only includes its dependencies.
First Load JS – The number of assets downloaded when visiting the page
from the server. The amount of JS shared by all is shown as a separate
metric.
Followed by either next start, when you want to start the production server:
next start starts the application in production mode. The
application should be compiled with next build first.
Or next export, when exporting the app as static HTML:
next export allows you to export your app to static HTML, which can be
run standalone without the need of a Node.js server.
For more information refer to Next.js CLI docs.
Normally this depend on what is written in your package.json file. For example, in my case, within this file I got:
"scripts": {
"watch": "webpack --watch --watch-poll --progress --color",
"prod": "webpack -p",
"watch2": "webpack --watch --watch-poll --progress --color",
"build": "webpack --config=webpack.prod.config.js --progress --watch-poll -p"
},
so, if I run
npm run watch
I'll be compiling for development and it will be executed:
webpack --watch --watch-poll --progress --color
However, if I run
npm run build
it will be executed:
webpack --config=webpack.prod.config.js --progress --watch-poll -p
and it will compile for production.
This answer suggests overriding PUBLIC_URL when running in in development, and is exactly what I need (see immediately below).
{
// ...
"scripts": {
"build": "react-scripts build",
"build-localhost": "PUBLIC_URL=/ react-scripts build"
// ...
}
// ...
}
How do I actually make use of this though? I tried building like this
npm run-script build-localhost
But I got an error saying
'PUBLIC_URL' is not recognized as an internal or external command
The app I'm trying to use this in is a ASP.NET Core 3.1 webapp with React inside, but my React knowledge is very limited. When I start the app in Visual Studio I want it to be running the app with a public URL of '/'.
OP works for linux/mac.
Seems like your dev environment is Windows.
Change package.json like the following:
"build-localhost": "set PUBLIC_URL=/ && react-scripts build"
And then run
$ npm run build-localhost
Using Hyperledger Fabric Composer I created a simple application.
However, when I try to interact with the application (which is served at http://localhost:4200), I keep getting the following error message:
Error: 404 - Could not find API route. Please check your available APIs.
This error message appears whatever I want to do (create new Participant/Asset, submit a transaction, ...)
I checked whether the error message had something to do with the application I created. So I also deployed another application I downloaded from the Internet. Again, the same error message appeared when I tried to interact with the UI.
**********************************************************
Here's the long story:
After I had finished writing the code, I took the usual steps to obtain an Angular Web App:
Inside the folder of the app ("my_app"), I created a folder called "dist".
Inside folder "dist" I ran the following commands:
composer archive create -t dir -n ../
composer network install --archiveFile my_app#0.0.1.bna --card PeerAdmin#hlfv1
composer network start --networkName my_app --networkVersion 0.0.1 --card PeerAdmin#hlfv1 --networkAdmin admin --networkAdminEnrollSecret adminpw
composer card import -f admin#my_app.card
//start rest-server:
composer-rest-server
yo hyperledger-composer
After the last command I chose (from the menu) the option to create an "angular" application based on the business network "my_app".
A folder containing the angular-application was created (name of the folder: "angular").
Inside folder "angular", I ran the following command:
ng serve
Some output on the command line was created, among others, the following line:
** NG Live Development Server is running on http://localhost:4200 **
When I went to address http://localhost:4200 everything looked fine at first.
However, whenever I click on any of the buttons in the UI (e.g. on "Add Participant"), I get the following error message:
Error: 404 - Could not find API route. Please check your available APIs.
I found the solution:
using
"npm start"
instead of
"ng serve"
avoids the problem.
FYI. There is a tutorial that shows use of the Composer Angular generator incl the npm startsequence.
I had the same issue and got the same error messgae. So i recreated the angular application using the yo hyperledger-composer tool but this time instead of choosing "Connect to existing REST API" I chose "Create new REST API" and then it connected fine on localhost:4200 while the rest server still ran on port 3000.
I just ran into this problem with version 0.20 of the Composer CLI tools. I solved the issue by editing the following in the /package.json file:
The "start" entry originally had "0.0.0.0" for the host value -
"scripts": {
"ng": "ng",
"build": "ng build",
"prepack": "npm run build",
"start": "ng serve --proxy-config proxy.conf.js --host 0.0.0.0",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --watch false",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
}
I changed that to "localhost" -
"scripts": {
"ng": "ng",
"build": "ng build",
"prepack": "npm run build",
"start": "ng serve --proxy-config proxy.conf.js --host localhost",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test --watch false",
"pree2e": "webdriver-manager update --standalone false --gecko false",
"e2e": "protractor"
}
Everything worked after restarting the Angular app with the new settings.
I also encountered this error, I resolved it by running the composer and the angular app as a background process.
I installed the forever package to run the two as a background process.
Then just killed the process if you're not gonna use it.
We are working on a previously ejected create-react-app and now want to add flowtype.
We have followed the guide at: https://flow.org/en/docs/tools/create-react-app/
Should that work for an ejected app?
This has unfortunately caused the webpack-dev server launched with yarn start to stop automatically reloading on file updates.
Additionally, after adding // #flow to some files there is no output or indication of flow enforcing type checking.
Will we need to manually update the webpack configs?
Heres the package.json scripts
"scripts": {
"start": "node scripts/start.js",
"build": "yarn build-client && yarn build-server",
"build-client": "node scripts/build.js",
"build-server": "./node_modules/.bin/webpack --config ./config/webpack.server.config.js",
"test": "node scripts/test.js --env=jsdom",
},
The output for running yarn start is:
Compiled successfully!
You can now view cra in the browser.
Local: http://localhost:3000/
On Your Network: http://192.168.1.65:3000/
Note that the development build is not optimized.
To create a production build, use yarn build.
The doc you linked tells you how to install the flow-bin and to make a configuration file but don`t tells how to launch it.
Flow is separated tool that should be launch by own command (depends on how you wanna run it):
if you want to check types check manually, you need to add npm command on the "scripts" section of your package.js: "example-comand-flow": "flow". Then call it by npm run example-comand-flow and you`ll get errors directly on a terminal you running the script.
if you wanna have continuing type checking, you should find a manual how to configure it in your IDE. For example, in WebStorm you should go Preferences -> Languages & Frameworks -> JavaScript and set JavaScript language version to Flow and specify flow executable.