Good morning,
I have a native js Date object, that I render in to my component with .toLocaleString("en-GB")
In the browser I get 29/12/2021, 09:00:00; however when I run a unit test with react-testing-library and jest:
expect(screen.getByText("29/12/2021, 09:00:00")).toBeInTheDocument();
The assertion fails because the locale date has been output as 2021-12-29T09:00:00.000Z
I have found the following ticket, https://github.com/nodejs/node/issues/8500 which says I need to build it with --with-intl=full-icu or --with-intl=system-icu, and I have also referred to the documentation at https://nodejs.org/docs/latest-v10.x/api/intl.html#.
I have tried adding this to my package.json under scripts as :
"start": "react-scripts start --with-intl=full-icu",
"build": "react-scripts build --with-intl=full-icu",
"test": "react-scripts test --with-intl=full-icu"
But when I do npm run test while I see it on the executed command it doesn't make a difference.
I am using node v10.16.0.
How can I get node to honour .toLocaleString("en-GB") when running tests, please?
Thank you.
Related
When I save changes to my client-side code, the browser hot-reloads as expected. But when I make changes to my server code, no hot-reloading occurs. This is a problem because we want to just run 1 command (i.e. npm start) to launch our React webpack-dev-server AND our API server, and rerunning the entire npm start to manually relaunch the server after changes is slow (because it unnecessarily relaunches the React dev-server as well). Also sometimes we forget to relaunch the server code, so in reality it should just hot-reload anyway.
I've looked across the internet and surprisingly can't find any straightforward solutions. I feel like I shouldn't have to eject the entire project and go deep into the webpack configurations to get this to work.
This is what the npm start portion of my package.json looks like now:
"scripts": {
46 "start": "concurrently --kill-others \"react-scripts start\" \"node server.js\"",
...
}
Is there perhaps a way I can do "react-scripts start" with a different target or something?
I'm a senior .NET developer wanting to move into MERN, full-stack. Is there a scaffolding tool that will quickly get me setup and that also supports authorization (register/login features, etc), built-in?
Express development is fairly unopinionated. As a result of that flexibility, there's a lot less built into it than there is in more opinionated framework like Rails for example.
The other thing is that since the MERN stack isn't monolithic, you'll need to set up the front and back ends independently.
The two most common 'scaffolding' tools I've come across in MERN development are Create React app and Express generator. These will get you started with a front end and a server that will run immediately, but for things like auth, you'll either need to build your own, or install packages that will handle it for you.
I've seen open source templates on Github that you can start with, but since things change so fast, I personally don't like the idea of starting off with someone else's outdated code.
Hope that helps!
For whoever lands on this page like I did.
I found two option for MERN scaffolding. The first is deprecated and the second seems to be abandoned and/or incomplete:
mern-cli (http://npmjs.com/package/mern-cli) (DEPRECATED)
mern (http://npmjs.com/package/mern) (ABANDONED)
My solution was to keep my React UI and Express API on separate directory, say "ui" and "server", in my project's root directory.
Then I use the cors module (http://npmjs.com/package/cors) to handle cross site resource sharing for development environment only, so that my react app can talk to my express server, which is running on a different port during development, like this (in server.js)
const cors = require('cors');
if (app.get('env').trim() == 'development') {
app.use(cors());
}
For production I just run a batch script that copies all the files from my ui/build directory to server/public directory after the react build process is complete. The scripts section of my package.json looks like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"postbuild": "copy-build.bat",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And the content of batch file reference in the postbuild key is
xcopy "build\*" "..\server\public" /s /y
If you prefer or have to use a bash script instead you can make a copy-build.sh file with the content
cp -r build/* ../server/public
Is it possible to launch create-react-app App in a certain browser of my choice? Currently, it always runs in the Chrome while I want it to do that in the Chrome Canary. Does anybody know?
You can use BROWSER environment variable to set which browser you wanna open the app in. For example,
BROWSER=firefox yarn start
or
BROWSER=firefox npm start
will open the app in firefox.
So, you can put something like this in your package.json
"scripts": {
"start": "BROWSER=firefox react-scripts start",
"build": "react-scripts build && sw-precache --config=sw-precache-config.js",
"test": "react-scripts test --env=jsdom",
You can read more about it in this pull request thread
With current iterations of create-react-app this can be accomplished by adding a .env file to the project with a "BROWSER" key. It's described in the Advanced Configuration section of the documentation.
If you want to use Google Chrome Canary for your development browser (as I do) then you'll need to create that .env file in the root of the project with the following contents:
# Override default browser for npm start in react-script
BROWSER=Google Chrome Canary
Be sure you don't get overzealous and quote it or add a semi-colon at the end. I did both and scratched my head at first why it didn't work.
You can use .env file with BROWSER=firefox
https://create-react-app.dev/docs/advanced-configuration/
This worked for me:
Set Chrome Canary as default browser in PowerShell (choose the right path first)
$chromePath = "${Env:ProgramFiles(x86)}\Google\Chrome\Application\"
$chromeApp = "chrome.exe"
$chromeCommandArgs = "--make-default-browser"
& "$chromePath$chromeApp" $chromeCommandArgs
(answer from)
https://stackoverflow.com/a/17536704/11878186
Set variable BROWSER=Chrome in .env file in root directory
I'm a Java developer but I have to try and debug a Node based application which runs inside Electron. I use IntelliJ IDEA for Java development/debugging and have WebStorm for which I want to debug the JS application.
As a Java developer I am used to starting the JVM/Tomcat/OSGi container in debug mode to which I can attach IntelliJ as my debugger. This allows me to dynamically add breakpoints without modifying code in IntelliJ. I want to be able to do the same with the Electron application but I haven't been able to work out how to do this.
I have tried starting Election with the --inspect option as detailed here but cannot attach WebStorm to it. I've also tried setting up a run time configuration in WebStorm itself which works as far as starting Electron but terminates with the error 'connection refused'.
I've also used this and this to try and attach a debugger but to no avail. I also have to work on Windows so I'm facing having to deal with inadequate tools to determine if Electron is listening on a port.
Update
I can't put complete code here but I would start the application with:
npm run dev
And this is the relevant part package.json in the root folder of the application but WITHOUT any debugging options specified:
"dev": "concurrently --raw --kill-others \"npm run dev-server\" \"npm run start\"",
"dev-server": "webpack-dev-server --hot --inline",
"start": "cross-env WEBPACK_ENV=dev electron .",
The application starts up i.e. the Election window appears but terminates before it is completely rendered. I can't say for sure how far into the start-up it gets before failing.
Update 2
I've modified the package.json file dev and start lines to:
"dev": "concurrently --raw --kill-others \"npm run %NODE_DEBUG_OPTION% dev-server\" \"npm run %NODE_DEBUG_OPTION% start\"",
"start": "cross-env WEBPACK_ENV=dev electron --inspect=5858 --remote-debugging-port=9223 .",
But still get Connection refused.
To debug Electron main process, you need using Node.js run configuration; for render process, the Attach to Node.js/Chrome configuration is required.
Please see https://blog.jetbrains.com/webstorm/2016/05/getting-started-with-electron-in-webstorm/ for more info
I found that WebStorm can debug the main process properly if electron is started with the flag:
electron . --serve --inspect-brk=5893
Note the 'brk', it stops the process until a debugger is attached.
Then I just created a run configuration (Attach to Node.js/Chrome) and specified the 5893 port, telling to reconnect automatically.
For example, if your package.json file contains:
"scripts": {
"start": "make start",
"test": "make test",
}
^ Will nodejitsu be able to parse and implement "make start"?
If the server.js file contains the static file path of the following directory then only the makefile functionality will work.
Nodejitsu should parse this just fine. Just be sure that you are calling node <app file>.js in your Makefile somewhere, or you change it to make start && node <app file.js>. Nodejitsu uses npm start to start your application, so the Makefile exiting without starting the app would cause the deployment to fail.