I want to learn React. so I installed Nodejs(v 10.16.0 LTS) and then using Windows Powershell I run following commands
npx create-react-app my-app
cd my-app
npm start
After installing, When I try to make a change in any code (like changing page title name), after saving code file. The Tab in Browser does not reload automatically and when I reload tab manually the error occurs which say
This site can’t be reached
localhost refused to connect.
Try:
Checking the connection
Checking the proxy and the firewall.
If I start this using PowerShell using npm start* command, then it run successfully. but I have to do this every time even when I edit my code. Browser tab did not reload and apply changes automatically.
Kindly guide me about this issue. Thanks
you need to add react-hot-loader in your project react doesn't come with hot reload you need to include it in your project below is the link to npm please go through the documentation they provide once, and add it in your project.
You shouldn't need react-hot-loader or anything else if you've created your react app through create-react-app - just make sure you're using the latest stable version of create-react-app
In your react app, when you run npm start, it uses react-scripts start script which behind the scenes uses webpack which actually takes care of hot module replacement
The problem you're facing seems most likely related to your local setup. Can you try running your app on a different port 8080 maybe?
Secondly, hot module replacement uses a websocket connection, can you check in your console if there is any error related to ws connection?
Related
My Nuxt app was initially built with Nuxt2, but recently I had some errors with ESlint and I was forced to upgrade and migrate the application to Nuxt3.
However on migrating, the application local server doesn't startup with the startup script. Below is an image showing the output when running npm run dev
Nodejs : 18^
nuxtjs: 3^
vuejs: 2.7^
Nuxt3 is using Vue3, not Vue2.7.
Also, your app is fine when you run npm run dev so you don't need to run npm nuxi dev per-se.
You could run npx nuxi-edge#latest dev as suggested here.
That one works thanks to npx not npm, which is quite different. npx doesn't need you to have the package installed locally or globally on the system, it can fetch the whole code remotely and run it on the fly straight away.
Still, in your case: use npm run dev, it's all good that way.
No need to run it through npx/nuxi, that just adds delay.
I am learning react and find myself running npm start on the terminal a couple of times but its annoying how it opens a new browser window everytime. I'm trying to stop this from happening on linux.
I found a solution for how to do this on Windows, but how can I do it on Linux?
Adding BROWSER=none to the .env file should get it solved.
If the folder /etc/profile.d doesn't exist create it. Then run touch /etc/profile.d/[any descriptive name here].sh and open it in the text editor of your choice. Then add export BROWSER=none there.
Then logout and login again. If it didn't work then try putting export BROWSER="none" in the file.
This is setting an environment variable.
Hope this helps.
fixed
create a .env file next to your package.json and put BROWSER=none inside
I don't think you need to run npm start so often. I've created my project via create-react-app which comes with Hot Module Reloading or HMR(restarts the server on any saved edit) in-built.
Starting a new React server multiple times can also be problematic as every time it will run on a different port. If you're integrating an API that has CORS set up for a particular port, it won't work on other instances.
What to do?
Create your application using create-react-app(cra) or add HMR using some library if you don't want to use cra. Here is a tutorial for that (haven't tested it).
Always keep a single dev server running. It will automatically reload on code change.
Stop the server by Ctrl + C when you don't want to use it.
I am using VSCode for Reactjs and in the starting when i was learning reactjs, there was no need to restart the server but now after every modification, I have to restart the server and then only the changes are applied on the server
you were probably using nodemon or pm2 or similar tool to watch for file content during development.
on production, that feature is probably not used.
to verify this, looks for scripts section in the package.json file and see what command did you use to develop locally and run on production
I have the following library https://github.com/codyc4321/react-data-components-updated
I installed it in my react project locally like npm i ~/react-data-components-updated
Now running my node server I don't get any changes no matter what I do. I am seeing old print statements which I deleted, and my new ones are not coming:
console.log('data in dataSort() in dataReducer.js:');
console.log(state.data);
doesn't show up.
I have constantly reinstalled like $ npm i ~/react-data-components-updated/ and it isn't helping. I was seeing weird errors affecting this location:
http://localhost:3001/__webpack_hmr
but right now I get a 200 for that address and it still isn't updating. How can I use this library locally and have my project update when it sees changes?
Problem is that your package got installed and is now in your-project-folder/node_modules, so in order for the modifications to replicate you have four options:
Directly modify the scripts in your-project-folder/node_modules/react-data-components-updated [not recommended]
Delete your-project-folder/node_modules/react-data-components-updated and run npm i ~/react-data-components-updated
Runnpm uninstall react-data-components-updated && npm i ~/react-data-components-updated so it reinstalls with the current files.
Go to ~/react-data-components-updated/package.json and upgrade the version manually (or by CLI) and then running npm update in your project.
Depending on your needs and how you're handling changes in your local package, one may be better than the other.
The project I am working on, works in the development environment. But when I deploy it live and navigate to the site, I only see blank screen.
I get the following errors in the console (from both development and production environment)
The same error exists in the development and production environments. The different is, I can navigate through the site pages in the development environment. But I only see a blank screen in the production environment.
I tried to update my jQuery to the latest version using the following command:
meteor npm install --save jquery meteor-node-stubs
But I still get the same error.
What am I doing wrong here?
This issue cost me some time to work out. Basically you need to find a sweet spot for jquery.
Meteor loads jquery by default, and in .meteor/packages I have jquery#1.11.10, which is probably what Meteor puts in for you.
You will also need to load a version somewhere in between that works. For me this command did the trick:
meteor npm install jquery#2.2.4
Cheers