I am setting up a project has a structure like this:
components folder contains lots of React components.
examples folder is a folder uses components as a local dependency
So, right now, the package.json of examples is like this:
{
...
"devDependencies": {
"components": "../components"
...
}
}
And I want the example to recompile when I change the code in components.
Any idea how can I do this?
EDIT
My project structure is like this, and I am using webpack.
.
+-- components
| +-- index.js
| +-- package.json
+-- examples
+-- index.js
+-- package.json
If your project is using webpack then hot relaoding will work :https://webpack.js.org/concepts/hot-module-replacement/
Otherwise if it is just node you can use a server like nodemon eg:
$ npm install nodemon -g
$ nodemon app.js
This automatically pick up changes.
Related
I'm working on getting a three-tier application running on Heroku. The backend is a Flask API with a React frontend. All works well locally and (ideally) I am trying to run both on the same server.
On deployment, I can access (public) API routes. However, at the index route I receive:
applicationName.herokuapp.com/:1
Failed to load resource: the server responded with a status of 404 (NOT FOUND)
My directory setup is:
Deployment
+-- __pycache__
+-- venv
+-- .env
+-- .gitignore (currently empty)
+-- app.py
+-- config.py (contains python dictionary with details for mail/database config)
+-- database.db (sqlite, 1 entry)
+-- profile
+-- requirements.txt
+-- frontend
| +-- build
| +-- node_module
| +-- public
| +-- src
| +-- package.json
| +-- package-lock.json
| +-- webpack.config.js
requirements.txt was generated via pip freeze prior to deployment. frontend/build was generated via npm run build, again just prior to deployment.
I've tried various approaches and tweaks to both server and client with no success. I've seen approaches that involve moving build and/or package.json to the root directory, but this did not work. I feel like I'm missing something fairly simple but I cannot for the life of me figure it out.
Select code excerpts include:
app.py
app = Flask(__name__, static_folder='/frontend/build', static_url_path="/frontend/public/index.html")
#app.route('/test')
#cross_origin()
def test():
return 'success' #*applicationName*.herokuapp.com/test works correctly
#app.route('/')
#cross_origin()
def serve():
return send_from_directory(app.static_folder, 'index.html')
if __name__ == ("__main__"):
app.run(host='0.0.0.0')
procfile
web: gunicorn app:app --log-file=-
frontend/package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"proxy": "https://*applicationName*.herokuapp.com/",
.env
FLASK_APP=app.py
FLASK_ENV=production
I'm currently trying to set up a React/TypeScript monorepo with two workspaces, #scope/project-lib and #scope/project-app. I have #scope/project-app's package.json importing #scope/project-lib: "*" under dependencies. I can get it to work by doing
import { MyComponent } from #scope/project-lib/build/components/MyComponent
but consumers are going to use
import { MyComponent } from #scope/project-lib/components/MyComponent
after I publish it, so obviously I'd like to use it that way inside the workspace as well.
I referenced the project-lib path in my tsconfig for project-app:
"compilerOptions": {
"paths": { "#scope/project-lib/*": ["../project-lib/build/*"] }
// other config options
}
I also import it into project-app's package.json:
"dependencies": {
"#scope/project-lib": "*",
"react": "^16.12.0",
"react-dom": "^16.12.0"
},
The odd part is that omitting the /build/ part of the path shows this error:
Module not found: Error: Can't resolve '#scope/project-lib/components/MyComponent' in 'path/to/user/folder/scope/packages/project-app/src'
I don't understand why it's looking in src (or maybe I should be pointing everything as src? But then how does it build TS and JSX on the fly?)
I too have a monorepo with TypeScript + Lerna (w/ Yarn Workspaces) with ~50+ packages.
It is configured to not use the path directive, because Yarn Workspaces can automatically detect those and symlink to the package directory in the root node_modules folder. That way, it will be as it is any 3rd party package and the package.json's main/module field will be read and used.
Graphically
node_modules/
-- #scope/ -> (this is automatically generated by yarn)
---- foo -> symlink /packages/foo
---- bar -> symlink /packages/bar
packages/
-- foo/
---- dist/ -> built by TypeScript
------ index.js
---- package.json -> contains "main": "dist/index.js"
---- index.ts
---- tsconfig.json
-- bar/
---- package.json -> contains "#scope/foo" as dependency
---- index.ts -> contains "import {baz} from '#scope/foo'"
---- tsconfig.json
package.json
yarn.lock
NB. packages must be built at least once before type checking and such, to ensure that their dist folder exist
Hello I have a project that I inherited from others a while back. The project was originally built using AngularJS. I am currently attempting to prepare for migrating the project to Angular2. I was attempting to switch my controllers over to components. When I attempt to change
angular.module('main').controller...
to
angular.module('main').component...
it complains that the property 'component' does not exist on type 'IModule'
From my googling I suspect that it is tied to typings (the project is currently utilizing typescript) but I am having trouble figuring out how to update this. when I run npm list on the project the first few lines return
#types/angular#1.7.3
+-- #types/angular-ui-bootstrap#0.13.47
| `-- #types/angular#1.7.3 deduped
+-- angular#1.7.8
+-- angular-route#1.7.8
further down I have
| `-- typescript#1.6.2
obviously I did not originally set up this project so im learning how this whole set up works. Please let me know what further information is needed.
I'm currently working on a React project using typescript and the bundler ParcelJs. I'm using a tsconfig.json file to configure typescript but for some reason that I don't know, Parcejs doesn't consider it ignoring all the errors on build.
For example, I wrote this code that is invalid in typescript:
const message: number = "Hello world!";
My eslint trigger this error correctly:
Type '"Hello world!"' is not assignable to type 'number'
But when I build this file using parcel ./src/index.tsx it compiles without errors.
According to the official documentation and this issue I need to declare a Validator in the ParcelJs configuration file .parcelrc:
{
"extends": "#parcel/config-default",
"validators": {
"*.{ts,tsx}": ["#parcel/validator-typescript"]
}
}
The parcel validator need to be installed in package.json:
...
"dependencies": {
"#parcel/validator-typescript": "2.0.0-nightly.112",
...
So at the end my project structure looks like this:
├── .cache/
├── dist/
├── src/
│ ├── index.tsx
├── .parcelrc
├── package.json
├── tsconfig.json
Note:
If I write invalid json data in the .parcelrc file, ParcelJs still succeeds to build without any problem as if the configuration file was ignored
Does anyone have an idea how to get ParcelJs to take into account the typescript configuration?
I think that 2.0.0-nightly.112 was published before I made this fix. There's also this issue that bit me when I accidentally installed an older version of parcel. Can you try installing the latest nightly release of both parcel and #parcel/validator-typescript, deleting your .parcel-cache folder and trying again? If that doesn't work, would you mind sharing a repo where I could try reproducing the issue?
Another thing to try is to make sure there is a yarn.lock file in the same directory that contains the tsconfig.json. From looking at the code, I know that parcel sometimes uses this to detect the root of the project (and the tsconfig.json file). If parcel can't find a tsconfig.json file, it won't typecheck due to this issue. (If this is the root cause, it's probably something we should fix with Parcel, but it would be a good thing to test).
One other current issues with #parcel/validator-typescript that I'm working on fixing is #4204, but based on what you described, I don't think it is the cause of what you're hitting.
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?