I work with React and typical app structure, where I have src/components directory and where I store React components.
I want to simplify a way of creating new components. I want in a few clicks or in one command create a component directory with all necessary files included. And each file should have its own template.
Like:
src/
components/
ExampleComponent/
index.ts
ExampleComponent.tsx
ExampleComponent.test.tsx
ExampleComponent.stories.tsx
ExampleComponent.scss
Is there any way to solve this task? Maybe WebStorm or VScode has templates like this?
You should be able to write your own bash script to be able to do this without too much trouble.
#!/bin/bash
# Create directory and all files
mkdir $1
cd $1
touch index.ts
touch $1.tsx
touch $1.test.tsx
touch $1.stories.tsx
touch $1.scss
It would probably be a good idea to add some error checking to the script like making sure it is given a command line argument, but that should give you something to start with.
Related
I ran this command to create a ReactJS app
npx create-react-app learningapp
This created several folders now, I dont know which of them are important. I mean I dont know their purpose.
Can anyone explain their purpose in short?
node_modules -- very important, as this will contain all the npm packages and their entire list of dependencies installed.
public -- very important, contains the static files served by your web server.
Index.html -- the index.html file where your react app will inject elements into. I believe this is the only "essential" file.
The other files in this folder will contain logos and manifests if you'd like your webpage to be able to be installed as a mobile app seamlessly. The manifest.json file holds the information about what the app icon and such will look like.
Favicon is the tiny logo you see in your tab title
robots.txt will have the instructions for bots visiting your website. Read about it here if you'd like (https://www.cloudflare.com/learning/bots/what-is-robots.txt/)
src -- very important, will contain your source code. If you want your app to do anything at all, it wouldn't be very wise to delete this folder. If you want to rename this to something else, you can, but you'd have to mess with the webpack configurations. So, not worth the little extra effort. However, you may alter the folder contents.
Unless you want performance monitoring and are writing tests for your app, you can safely delete the test file and the report webvitals stuff. You can make your test files somewhere else too, it doesn't matter if it's here. Just make sure you configure your testing library so that it looks for the correct files.
The rest of the files in this folder can be modified all you like, but try not to touch index.js unless you want to go mess with the webpack configs to change the entry point. Webpack looks for index.js as an entry point to build its dependency tree during compilation.
.gitignore -- this is the files/folders you can tell git to ignore when tracking your folder. A usual candidate for this file is the node_modules folder.
package.json/package.json -- very important, don't directly mess with these unless you know what you're doing. This contains the info about npm packages which your require to run your project properly. A situation where you will need to mess with package.json is when you want to add some custom npm scripts, which is often quite useful.
README.md -- just your readme file which is used to display info about the project on your github repo for example. You can delete it, but just put something on there containing basic info about the repo/ what it does.
I am implementing vue-monaco plugin inside Laravel application using Vue.
The steps are rather easy, I install the vue-monaco like:
npm install vue-monaco
Then in my Vue file I import the monaco editor like:
import MonacoEditor from 'vue-monaco'
I don't even use it, just import it and then run npm run watch. This result in npm creating exactly 63 files in my public folder, like in the image below (first 15 are shown, 63 are being created).
Why does this happen and how can I bypass it?
vue-monaco is basically a VScode in your webview, right ? If it's the case, it's probably creating some configuration files for it to work and this is totally normal.
What's the content of those files and the content of your package.json (npm run watch) ?
If you want to custom some options for this plugin, it looks like that you will need to dive into those settings: https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html#create and pass it as props to vue-monaco (this info is taken from the doc itself).
Otherwise, creating a simple vue project can help debug things too IMO, see if the files are created in public too or if it's more of a laravel configuration issue. Then, you could maybe try the github issue of the main JS project: https://github.com/microsoft/monaco-editor/issues?q=is%3Aissue
I have a React application created using create-react-app. I also have an external application that is using this application by including the bundled JS and CSS files (the ones create using the build script).
Right now, I'm using the React template created by the dotnet new command, and I have configured the server to serve static files located in the build folder.
For this reason, I have created a couple of additional NPM scripts that rename the bundle files (remove the hash from the name), so that I don't need to update my external application's links with every build.
Right now, whenever I change something in the code, the whole build process has to be processed to create the two files.
I have created a "watch" task to run my build scripts whenever I have a change, but I was wondering if there is a way to speed up the process and somehow configure the React application to be served from memory or something just like when we "normally" run the application.
So, maybe a couple of questions:
How to achieve this in a "normal" React app created by create-react-app?
how to achieve this in the context of the dotnet template?
you can use nodemon in the build folder of the create react app.
as the documentation says
By default nodemon monitors the current working directory. If you want to take control of that option, use the --watch option to add specific paths:
so you can use something like this:
nodemon --watch app --watch libs app/server.js
for details try other approaches given here
This could be due to your filesystem, file extensions or the Create-React-App default webpack/project configuration. You don't necessarily have to change all of this because hot-reloading is supposed to work out of the box, and more so if the project has just started.
For example, I once had an issue with a Typescript installation(^17.0.1) where some files with extension .ts will not trigger hot reloading. I had to change to .tsx and add a React import. The same could happen with .js and .jsx files.
In case of problems with your filesystem (Unix, Mac) you can try the React config (FAST_REFRESH=false) here... or changing folder names, but I haven't bumped much into this.
I have a folder structure for a Node.js /w Angular.js project with some files like so (from project root):
frontend
frontend-file1.ts
frontend-file2.ts
backend
backend-file1.ts
backend-file2.ts
I use a TypeScript compiler along with many other gulp plugins to compile this into a build folder like so (notice how frontend files get placed into public):
build
backend-file1.js
backend-file2.js
public
frontend-file1.js
frontend-file2.js
In the source folders, I use ES6/TypeScript import statements to import files.
Example: backend-file1.ts
import './backend-file2';
Situation
I've written some custom utility functions that should be used by both backend and frontend. I don't want to repeat the same functions in both folders, since this is prone to errors and is double work.
I've considered creating a shared folder at the project root amongs the frontend and backend folders, but I can't import files in the browser that go up further than the index.html file, which is in the frontend folder.
Question
How would I be able to write a TypeScript file once and be able to import this file in both frontend and backend folders?
I would just structure the code like this:
- src/
- server/
- client/
- shared/
You can place all your shared libraries into shared directory then import/require them from your server or client source files:
import '../shared/library'
To extend the already given answer for outFile case I will show my way of dealing with class sharing in case when you cant or do not want to use webpack/browserify/outFile options.
The structure looks similar
-client
index.html
app.ts
-server
service.ts
-common
helper.ts
-dist
-client
-index.html
-lib
-client
app.js
-common
helper.js
-server
service.js
-common
helper.js
The idea is how you build the dist folder with the results of your build. I do this with gulp tasks and by having the structure above it allows me to reuse components both server and client side from the common library.
Note. To work at client side do not forget to setup base url for systemjs in index.html:
System.config({
baseURL: './lib'
});
System.defaultJSExtensions = true;
Hope this helps.
I wanted to share what I've done so that others have the same option. I felt the other options which are cleaner required a lot more work, and since this is a personal project I set it up in a simpler but more crude way.
Basically I wanted to use symlinks so that I could edit it from either location without issue and without making too many changes to the current project structure. I'm also lucky that I don't need to support Windows for this.
I already had a single repo with a React app in the fe folder and the backend server in be, both using TypeScript. Here's my resulting folder setup:
be/
src/
shared -> ../../fe/src/shared
fe/
src/
shared/
I'll note that React does not support symlinks (IIRC it's because webpack does not support symlinks) and so the "real" folder should be in the frontend.
I also wanted this to work without manual setup, and so I made an extra script in package.json which makes sure the symlink is already set up. It also creates a broken symlink if the symlink is already there, but again, this is for a personal project and I'm okay with it. (Happy to update it if someone has a better understanding of ln than I do.) In the backend's package.json:
"prebuild": "ln -f -s ../../fe/src/shared src/shared",
"build": "tsc",
How can I run Node.js like node? at the moment I have to Cd into the directory of my js script, is there a way to run it from any where?
Just run the command and include the full file path:
# alex # alex in ~ [16:53:43] tty:s002 L:1 N:14 C:0
$ node /full/path/to/my/application/file/index.js
There can be possible answer like the one suggest by #ajtrichards, its one way to achieve what you like.
In other ways you can follow full path approach and create a .bat file, one time effort, after that you need only to click that file to run your node app.
Other way, If supposed in your app structure your server folder is of different shape i.e. main file is located at inner leve (its possible in some cases), you can configure package.json to handle your server execution with npm start.
Above are just possible suggestion.