After upgrading to the newest version of create-react-app I've run into a bit of a big problem where web pack no longer watches for changes.
In my project I use node_modules to keep all of my project source code, and while I can import code from here without problems, web pack no longer watches this folder which means any changes made require restarting the project which is very frustrating.
bellow is an example of what my project structure looks like:
my-app/
node_modules/
package.json
.gitignore
public/
favicon.ico
index.html
src/
node_modules/
my_app/
components/
ui/
resources/
styles/
images/
App.js
index.js
Again, creating an consuming a new component is no problem, but making changes no longer get updated live in the browser, and I can't seem to find what the solution is.
In react-scripts in create-react-app, there is a configuration for webpackDevServer; webpackDevServer.config.js
There the directory node_modules is ignored. Could you remove this and try out?
Related
I just started using docz and added it to an existing project. I got a component from my react folder to show up but it is missing styling so I am trying to import my SASS files into my docs.mdx file. I followed the directions on https://www.docz.site/docs/usage-with-css-preprocessors and added the below to gatsby-config.js.
plugins: ['gatsby-plugin-sass']
But everytime I run yarn docz dev, the .docz folder where I have the gatsby-config file keep getting reset and it removed the gatsby-plugin-sass line. Am I missing anything?
File structure below. (Only showing the folders and files I referenced)
- .docz
--- gatsby-config.js
- react
--- components
--- docs
------ docs.mdx
- styles
---
---
I solved this problem today...
You need to create a copy of the gatsby-config.js and place it in your root folder (same directory where your src folder is). This automatically creates a gatsby-config.custom.js file in your .dist folder.
Then you add 'gatsby-plugin-sass' to the plugins array of the custom JS created. This should have been installed in your package.json already.
Then run yarn docz dev and you're good to go.
Also note that you need node-sass installed in package.json
I started to use React Native recently and, following the oficial docs, I initialized a project using npx react-native init ProjectName.
I'm not sure if the tools versions matters (probably yes), but i'm using npm version 6.13.7, react-native-cli version 2.0.1 and react-native 0.62.2. With that config, the file architecture i that get is the following:
I seached about it, but i not found an answer. So, can someone please explain to me what is the purpose of each file in this file architecture and which of these files can i remove?
Thank you in advance :D
Package.json
This file holds all of the dependencies of modules that your app is using and needed to install for running your app.
yarn.lock files yarn and package-lock.json
These two files hold the version of your dependencies yarn.lock package-lock.json is automatically generated for any operations where npm or yarn modifies either the node_modules tree or package.json. It describes the exact tree that was generated, such that subsequent installs are able to generate identical trees, regardless of intermediate dependency updates.
app.json
This file holds your application name etc.
babel.config.js
This file holds configs related to babel, Babels is a transpiler that transpile ES6 to ES5.
index.js
This is the entry point of your application form where your react-native code start executing.
EsLint and Prettier
These file related to maintaining the code indentation, Unused imports, extra, spacing, these files holds configs related to these things(EsLint and prettier are used to avoid above-mentioned things).
.watchMan
watchman watches the code changes when the packager is running, so this file have configs about this.
.Flow
Flow is been used for type checking so it holds the configs related to this.
node_modules
This folder holds all of the modules that your app is been using also lited down in your package.json.
And then there is Android(which holds native android code), IOS(which holds native ios code), and other JS files which holds code react-native js code.
This is my website, it is not showing any of the styling but on my localhost it shows styling... any ideas? https://jaydenszekely.com/
All looks good to me but I must have missed something.
All my code is here :) https://github.com/deslabcreative/jaydenszekely
My CSS is imported in Layout.JS for anyone wondering :)
Nothing out of the ordinary in log that I notice :)
Please Help!
I took these steps and it fixed the build:
Removed:
.cache
node_modules
commit the changes to repository
Fixed:
added .gitignore (.cache, node_modules)
replaced PropTypes.file with PropTypes.string
git push all the fixes
Since there is a yarn.lock, Netlify will use yarn to install your dependencies, so no need for node_modules. The .cache is used by Gatsby, but will get created during the build, no need to commit it to the repository.
We have a large React application bundled with Webpack4. It's comprised of several smaller applications and services, each one isolated behind its own URL prefix. Those services share a common layout, several React components and a main menu.
https://largeapp.test/service1
https://largeapp.test/service2
At the moment, the source code for each service is placed in its own directory below the main src/services directory:
largeapp/
package.json
webpack.config.js
src/
services/
service1/
...
service2/
...
We want to refactor the code to manage the main application and each service as npm packages, each one with its own git repo:
#largeapp/main/
.git/
package.json
webpack.config.js
src/
#largeapp/service1/
.git/
package.json
webpack.config.js
src/
#largeapp/service2/
.git/
package.json
webpack.config.js
src/
Each package will export some metadata (name, description, icon, url key) so we can build a dashboard with links to each services, and one or more React components:
export {
metadata,
Main,
Sidebar
}
We have no experience at organizing such a large application that way, so we have some doubts:
Shared packages: all our packages should share same versions of React and some other packages. Is using externals the best approach?
Watch for changes in dependent packages. At development time we want to hot reload the app when something change, doesn't matter wether the change happens in the main package or in the service package. Maybe there's some approach based on using npm link to package folder? Two webpack watch processes dependent in some way?
When I create an AngularJS project with
yo angular
it creates a node_modules/ directory but puts that directory in .gitignore. When I clone the project elsewhere and run
grunt server
I get
Fatal error: Unable to find local grunt.
If you're seeing this message, either a Gruntfile wasn't found or
grunt hasn't been installed locally to your project. For more
information about installing and configuring grunt, please see the
Getting Started guide:
The getting started guide doesn't say anything about how to handle the missing node_modules/ directory however.
The node_modules/ directory is missing deliberately because yeoman put it in .gitignore.
What's the right way to use Yeoman and Grunt in this case?
Is there some better documentation for Yeoman and Grunt?
Thanks.
That is the correct behaviour. The contents of node_modules is not meant to be committed to source control. The idea behind npm is that it tracks all required node dependencies in a file called package.json. This file should be committed to source control. Then on a different machine, you can check out the code and run
npm install
This looks at the package.json file and downloads all required files from the cloud and puts them all into a new node_modules directory.
If you do enough searching on the topic you'll eventually run across the following article which states that if you're building an application that you should check-in your dependencies. Reliance on package.json can cause issues as module authors publish updates, a better solution is to use
npm shrinkwrap
which creates a file locking down your dependencies and your dependencies dependencies but even this can be brittle as it is possible for a module author to re-publish the same version with different code.
Since yo angular is creating an application IMHO node_modules should not be included in .gitignore, however as I just rudely discovered if you're on Windows there's a significant chance that you can't check-in the modules in that folder due to path lengths...sigh.