I have created a project using this tutorial:
https://learn.microsoft.com/en-us/visualstudio/javascript/tutorial-nodejs-with-react-and-jsx?view=vs-2019#:~:text=%20Tutorial%3A%20Create%20a%20Node.js%20and%20React%20app,a%20Node.js%20web%20application%20project.%20Open...%20More%20
It is working perfect but, for each change I do to the code, I need to compile to see results.
Any way changing index.html, packacge.json or wathever to do an npm start and see results without compiling?
The current struct I have is an app.tsx file that is the main reactdom file and a lot of js files.
after compiling a dist\app-bundle.js file is created and is the file that is in the index.html file:
<body>
<div id="root"></div>
<!-- scripts -->
<script src="./dist/app-bundle.js"></script>
</body>
I tried to change src to "./app.tsx" to avoid generating app-bundle.js every time, but doesn't work. A blank page is what I have.
What I would like to have is the browser working over the source files and not over the compiled one to develop faster. And when finishing, then compile only one time.
I hope I explained more or less right.
thanks!
Thanks!
From where i'm at right now, you do need to add more detail in your question about what you actually want. When you mean "compile" are you just referring to running your code at runtime using "npm start".
If so, with Node.js, any change you make to your source folder will not show up if you are already running your application. Although, there is a package you can download called Nodemon that allows you to make changes to your application and once saved, restarts your server with the new build in mind.
To install this for VS2019, navigate to your solution explorer, right click your npm, select "install new packages", search nodemon and install. Once installed, open your package.json file and under your scripts, modify your npm start script to stop running with node and instead run with nodemon :
"scripts": {
"start": "nodemon server.js",
...
}
Related
Fresh Next project -> "npm i --save-dev sass"
then in /pages/_app.tsx I write at the top:
import '#/assets/globals.scss;
The file exists and the path is correct. But the project doesn't load. If I run "npm run dev", the website is stuck loading forever and the console just says:
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
If I run "npm run build", it's stuck with "Creating an optimized production build..."
The console doesn't display any error or warning, nothing. I've tried running these commands with --verbose, but nothing useful. If I change the file to .css and import "...css", then everything works fine. I change it back to .scss, and stuck again.
I didn't add any next configuration.
Next version: 13.1.2
Sass version: ^1.57.1
Node version: v14.20.0 (I can't upgrade because all of my projects crash)
OS: Mac OSX
I've tried to search for this error 'cause I thought someone else would have it, but I find nothing. I've also checked the official Next Github issues page. I've tried to find errors or warnings in the console, but nothing. I've followed the official Next documentation, and as I say is a fresh project, nothing special. And as I said, If I remove .scss files and use only .css, the project works.
Sorry for not being able to provide more info. If you need something else please ask and I will edit the question.
EDIT:
don't know if it's related, but while I fixed this problem I tried to compile myself .scss files into .css, and use .css because then my project works.
I tried to run "node-sass ./styles.scss" and it displayed this error:
Node Sass does not yet support your current environment: OS X Unsupported architecture (arm64) with Node.js 14.x
I am doing a next js project with my friend. I want to run the project with vs code but when i run the commmand "yarn start", i get the following error:
There was a problem loading the local develop command. Gatsby may not be installed in your site's "node_modules" directory. Perhaps you
need to run "npm install"? You might need to delete your "package-lock.json" as well.
error Command failed with exit code 1.
I have done every thing to solve the problem but it is still there.I have re installed npm and gatsby.I have node installed but the problem is still there.I dont know how to fix it.Please guide me
I would highly recommend to delete the package-lock.json then navigate to the root folder of the project and run in the terminal "npm i", also make sure that You have created the nextjs project as in the guidance here -> https://nextjs.org/docs/api-reference/create-next-app
I'm trying to use Vite for a React project. I need to configure Vite so that when I run the dev server it places the runtime files in a particular directory (because the files are used with another runtime environment). The server config doesn't seems to have an option but I'm not sure if I'm missing something or it is in a different place. Thanks
It doesn't seem to be possible right now according to this repo discussion https://github.com/vitejs/vite/discussions/6108
Meanwhile, you could run the dev command along with the build --watch command to have both, but it would get slower
npm run dev & npm run build -- --watch
I'm having trouble finding much documentation on this command.
Say you are working on another person's React app, have unzipped it to your desktop and run 'yarn install' to get the dependencies. You are about to make some additions to the code. Is this when you run 'yarn start'?
I was given these instructions:
"Go to your terminal and navigate to the root folder of the extension. Type yarn start, this will make a build folder within the root folder. Stop that operation (on a mac it’s ctrl-c) and then build the updated version."
To me, this sounds sort of like I'm supposed to make the edits, then run 'yarn start', stop the operation and run the build command in quick succession. However, I was under the impression 'yarn start' is what you run in the beginning, before you start working on the React code.
Can someone set this straight for me? At what point in this process does 'yarn start' come into play?
Thank you!
As per this,
Go to your terminal and navigate to the root folder of the extension. Type yarn start, this will make a build folder within the root folder. Stop that operation (on a mac it’s ctrl-c) and then build the updated version.
it is clear that your yarn start command is building your application.
Building your application means it bundles your js, css & assets files to a single chunk file which can be run in production.
Coming back to your question, when to run yarn start.
So whenever you done with your changes and ready to go live then you call this command which will give you a updated build folder for production.
It's a predefined command in your package.json
It will look like this:
in your package.json
{
"scripts": {
"start": "terminal go do something"
}
}
I am working on React web app and to deployed it I used create-react-app. There is a file called registerServiceWorker.js which takes care of initializing the service worker. I want to cache some files on install event however the self.addEventListener('install', event gives me the error "Unexpected use of 'self' no-restricted-globals". I manage to get rid of that by changing self to window, however the install event is never being fired. How to use this "build in" service worker in React? Or can I create the other service worker?
After struggling with this myself, I finally figured out the following pieces of information:
the serviceWorker.js file in the default CRA project is not the same sort of service-worker.js file described by the PWA documentation from Chrome and Mozilla. That's not where the self.addEventListener statements go. They go into the file referenced by CRA's serviceWorker.js, specified by the string
const `swUrl = ${process.env.PUBLIC_URL}/service-worker.js`
By default, that service-worker.js is a file that you cannot access or modify! You will need to create your own service-worker.js file in the /public folder and point swUrl to it instead. It should point to the location as a string, statically, which means it will not get integrated as part of the build process and self will correctly refer to the module instead of the global context.
I found the simple solution. This utility is perfect for that: https://github.com/bbhlondon/cra-append-sw.
cra-append-sw
Utility tool to append custom code to ServiceWorker created by Create
React App.
It allows to keep the default CRA configuration (no ejecting). It
simply appends custom code to the ServiceWorker file created by CRA
build scripts. By default, it bundles the code using very basic
Webpack+Babel configuration (this can be omitted; see options).
Installation
$ npm install cra-append-sw --save
Usage
"start": "react-scripts start && cra-append-sw --mode dev
./custom-sw.js",
"build": "react-scripts build && cra-append-sw
./custom-sw.js",