React app server wont restart automatically using create react app - node.js

I am Making a simple app using create-react-app
but the server stops and won't update with changes
Plz Help
npm version 6.14.4
node version 10.19.0
Ubuntu 20.04 LTS
WSL 2 Windows 10 Home\
My Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
serviceWorker.unregister();
My app.js
import React from 'react';
import Palette from './Palette';
import seedColors from './seedColors'
import './App.css';
function App() {
return (
<div className ="App">
<Palette colors ={seedColors[3]}/>
</div>
);
}
export default App;
My Palette.js
import React, { Component } from "react";
class Palette extends Component{
render(){
return(
<div><h1>Palette</h1></div>
)
}
}
export default Palette
The seedColors.js ,I have taken from https://github.com/Colt/react-colors/blob/master/colors-app/src/seedColors.js

Try adding a .env file to your root project directory (where you have package.json and node_modules). Then inside .env, add CHOKIDAR_USEPOLLING=true. This just worked for me when I was having issues with hot reloading not working. Apparently the "watcher" requires this setting when working with a VM (like WSL). I found this recommended in the top answer here: React create app hot reload is not always working on linux

Related

Why does my React Website Take 43 seconds to Load?

I'm not sure why my react website is taking so long to load. It takes 43 seconds
All I have is in index.jsx
import ReactDOM from "react-dom";
import React from "react";
import { HashRouter, Route } from "react-router-dom";
import Home from "./components/Home";
ReactDOM.render(
<HashRouter>
<div>
<Route exact path="/" component={Home} />
</div>
</HashRouter>,
document.getElementById("main")
);
Home.jsx: imports react and renders hi
webpack.config.js : https://pastebin.com/raw/zdUws0R8
package.json : https://pastebin.com/raw/VR6pSP44
index.html : https://pastebin.com/raw/9AVNBpTN
I checked your website and it seems to be working fine to me for now;
For more details, I have added a:
Website Request screenshot
You might want to have a look at your SSL certificate though.
All the best!
I think you need to reinstall your project via :
npx create-react-app YourProject
and use
BrowserRouter
instead of
HashRouter
in 'react-router-dom'
then start the development server after creating the components or editing it via
npm start

React.js website build works on one host, but not another

I am new to react.js . I have created a react website using create-rect-app. I have run: npm run build in git and got my static site files. Everything works on the test host, however when i moved hosts only index page works and navigating to other page gives 404 error. For routing im using react-router-dom.
How can i get my page to work on the other host?
Working host: http://000webhost.com/
Badly working host is some local provider
Edit: Basically i have pages such as /Home and /Contact.
Im using react-router-dom.
code:
import React, { Component } from 'react';
import { BrowserRouter as Router, Route} from 'react-router-dom';
import logo from './logo.svg';
import './App.css';
import Home from './pages/Home.jsx';
import Contacts from './pages/Contacts.jsx';
import Our_products from './pages/Our_products.jsx';
class App extends Component {
render() {
return (
<Router>
<div>
<Route exact path ="/" component={Home}/>
<Route exact path ="/Home" component={Home}/>
<Route exact path ="/Contacts" component={Contacts}/>
<Route exact path ="/Our-products" component={Our_products}/>
</div>
</Router>
);
}
}
export default App;
My index is linked to /Home as you can see from code. i have uploaded Build folder to public_html on both hosting platforms. On one site works normaly, on the other only /Home page shows up.
So, you can ignore this, but what helped is changing
<a href="/" />
to
<Link to="/" />
. Basically one hosting provider could render links as
<a />
other only as
<Link />

How do I create a component in Angular 2 that imports the QuillJS module?

I am fairly new to Angular 2 and TypeScript. I am using AngularCLI and NPM to create my Angular Project. I have used NPM to install the quill node module into my project. I am now trying to create a component in which I can customize my quill editor through their API.
I am trying to use:
import * as Quill from 'quill';
This is returning a 'cannot find quill module' error.
I have already added
"": "0.0.26",
"quill": "^1.0.4",
to package.json as dependencies.
I tried to reproduce your issue in a pet Angular CLI project generated with the ng new command, and it worked fine. Here is the code:
import { Component } from '#angular/core';
import * as Quill from 'quill';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
ngOnInit() {
console.log(Quill);
}
}
And here's the output I get:
Image Link
Go to you project's node_modules folder and look for a folder named quill, anyway, even if it is there, delete the node_modules folder and run npm i command again

In create-react-app Bootstrap-react loading after my scripts, so my scripts have low priority

In create-react-app Bootstrap-react loading after my scripts, so my scripts have low priority.
How can I change it? I don't know, because can't change webpack config of react-create-app.
In my main component I added:
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';
And after in my different componets I adding react-components like this:
import {
Col,
Navbar,
Nav,
NavItem
} from 'react-bootstrap'

Render react component on node server, with webpack

I have a react component. <myFooter>. It is a simple footer.
import React from 'react';
import './my-footer.scss';
export default class myFooter extends React.Component {
render() {
return (
<footer className="col-xs-12">
hello !
</footer>
);
}
}
I want to render it from the server-side. On the backend, I have an express server. For that I wrote this:
import myFooter from '../components/my-footer.jsx';
app.get('/footer', function(req, res) {
var string1 = ReactDOMServer.renderToString(myFooter);
res.send(string1);
});
Now the problem is that server cannot read sass files. For client side rendering, I am using webpack. Webpack builds everything and gives a bundle file.
But i'm not sure what happens if its the server side. How can I compile using webpack. If I can, will i need to compile my app for each request on node server ?
You need 2 webpack builds:
1 to build the client
1 to build the server.
When building the server, use css-loader/locals instead of css-loader in your webpack configuration.
Read through this issue for more details: https://github.com/webpack/css-loader/issues/59

Resources