I have a project with two folders, client and server, and I also have a package.json at the root of the project to manage starting and installing on the client and server from one place. The problem occurs when I try to install packages from the root using one of the install scripts I have:
"scripts": {
"install-server": "npm install --prefix server",
}
when I run the above script it not only creates a node_modules folder but also downloads additional files into the server folder, which I think are supposed to go into the node_modules folder.
But the following script works fine
"scripts": {
"install-server": "cd server && npm install",
}
why is that?
Related
I've always used just npm and never yarn/webpack explicitly. I need to run the code from this repo:
https://github.com/looker-open-source/custom_visualizations_v2
Like a dev server or something to ensure it's serving the files properly but I don't see a "run" like npm run start. Does this just not exist with yarn? It feels like this code should work as is and I shouldn't have to add anything.
EDIT: I've now tried yarn run watch but it just seems to build the code again and not actually host anywhere
npm run somecommand just looks up in the "scripts" field of package.json for the key
somecommand and executes the value in the terminal.
So npm run start basically runs the start script from package.json
The same thing is done using yarn via simply yarn start
In the linked repo, there isn't a start script in the package.json, rather a watch script, so you should be able to run it with the below steps:
yarn to install dependencies after cloning the repo to local (similar to npm install)
yarn watch to start the webpack server (analogous to npm run watch)
Edit:
Turns out the watch command is just setting up webpack to watch for changes and recompile the project every time there is a change.
To run a development server, you will need to add another script preferably with name start and use webpack-dev-server
So the package.json has entries like:
...
"watch": "webpack --config webpack.config.js --watch --progress",
"start": "webpack-dev-server --config webpack.config.js",
...
Then running yarn start should open a dev server at localhost:8080
I have a MERN stack project where previously everything server related was at the root level, however issues with ESLINT, VSCODE and package.json files has meant that I'm moving everything related to the server into it own sub directory.
However this has meant that Heroku is now giving me errors that look related to Express not being able to serve the files. Please see screengrab of errors on Heroku log below.
Deploying the app on Heroku works fine with no build errors.
How Express is configured in my server.js file
// prod only, uses /public in dev env
app.use(express.static('index.html', { root: '../client/build' }) );
app.get('*', (req, res) => {
res.sendFile(`index.html`, { root: '../client/build' });
});
My directory structure
client/
src/
public/
build/
package.json
server/
routes/
models/
server.js
package.json
.gitignore
README.md
package.json // very small file only including scripts to satisfy Heroku
Root level package.json (entire contents of file)
{
"scripts": {
"start": "cd server && node server.js",
"build": "cd client && npm run build",
"install-server": "cd server && npm install",
"install-client": "cd client && npm install",
"heroku-postbuild": "npm run install-server && npm run install-client && npm run build"
}
}
Notes:
Express isn't having a problem serving the files when I start the project locally
Heroku requires a package.json file at the root directory if you're suing a Node.js type project. This is why I have a small package.json in my root that doesn't have much in it
As it turns out switching from this:
app.use(express.static('index.html', { root: '../client/build' }) );
To
app.use(express.static('/app/client/build'))
Solved the issue.
I did try app.use(express.static('index.html', { root: '/app/client/build' }) ); but that again broke the site.
I have a React app in views folder. There is Root Folder contains model and controller and views. In that views folder. I have a React app. so, How can start both ??? Only I can run either root folder or react. Please help me. how to folder structure
No problem with folder structure, you can stay with this structure.
You can use an npm package called concurrently.
This package will help you run your backend and frontend simultaneously.
Install this package on your root directory.
Like> npm install concurrently --save
then inside your root package.json file(i am assuming you using Nodejs as backend and have nodemon package installed)
use this commmand on scripts > "scripts": { "start": "node index", "server": "nodemon index", "client": "npm run start --prefix client", "dev": "concurrently \"npm run server\" \"cd views && npm start\"" },
then from your root terminal type npm run dev .
Hope it will work.
If it didn't, then please stay with documentation of that npm package
I have a folder of dynamically loaded asset files I want to include in my parcel output directory. How can I include unreferenced static asset files like .json, .jpeg, .txt, .etc with my parcel build command?
With Parcel v2 there's a different plugin: https://github.com/elwin013/parcel-reporter-static-files-copy
yarn add parcel-reporter-static-files-copy --dev
then you need to create .parcelrc or add to the following to it. (Note: "..." is literal not something you need to fill in):
{
"extends": ["#parcel/config-default"],
"reporters": ["...", "parcel-reporter-static-files-copy"]
}
now any files (and sub-directories) in a directory named static will be automatically copied to the website (typically your dist folder) when you do the regular parcel build.
Note: This answer is for Parcel v1
There is a parcel plugin for that:
https://www.npmjs.com/package/parcel-plugin-static-files-copy
Install it:
yarn add parcel-plugin-static-files-copy --dev
Or
npm install -D parcel-plugin-static-files-copy
Then, in package.json, add:
"staticFiles": {
"staticPath": ["path/to/a/staticFolder"]
}
It should copy your files to the public folder.
Stay safe!
The best way to handle this is having control of the code. npm already provides the tools needed for this job. In the package.json, when running commands with &&, the first command will run, and if it does finish without any error, the second command will also be executed. Running &, however, will run each command in the background independently, regardless of what happens to the other command.
In other words:
Use && for sequential execution.
Use & for parallel execution.
For example:
project/
|dist/
|...
|src/
|assets/
|text.txt
|memos.txt
|info.ini
|css/
|style.css
|img/
|a.png
|b.jpg
|c.jpeg
|data.json
|not-to-copy.json
|not-to-copy.conf
|index.js
|index.html
|package.json
If you have a project structure like this add, some scripts to the package.json
{
...
"source": "src/index.html",
"scripts": {
"clean-dist": "rm -rf dist && mkdir dist",
"copy-img": "cp -vR ./src/img ./dist",
"copy-data": "cp -r src/data.json dist",
"copy-assets": "cp -r src/assets/* dist",
"copy-files": "npm run copy-img & npm run copy-assets & npm run copy-data",
"init": "npm run clean-dist && npm run copy-files",
"start": "npm run init && parcel",
"build": "npm run init && parcel build"
},
...
}
This configuration will sequentially run clean-dist and copy-files. The former will delete the dist directory and make the directory again. Then copy-files will copy src/img -> dist/img, src/assets/* -> dist/* and src/data.json -> dist/data.json in parallel. Finally, parcel will be executed.
You can edit your package.json scripts to copy the files after the build has executed. This is how I had a .htaccess file to the dist folder:
"build": "rm -rf dist && parcel build src/index.html -d dist --public-url ./ '.' cp src/.htaccess dist"
I saw many repo, that contains dist folder. Why? I think repo should store only source code, without any builds and so on.
Let's look at follow example with ES6 code.
package.json
{
"files": [
"dist",
"lib"
],
"scripts": {
"build:lib": "<transform ES6 to ES5 and put it to ./lib folder>",
"build:umd": "<make a umd module and put it ./dist folder>",
"build": "npm run build:lib && npm run build:umd",
"postbuild": "<make minify code>"
"prepublish": "npm run build"
}
}
I think this is a good way. And I saw several repo that do the same. In this situation github repo would store only src and npm repo only lib and dist.
And now another question. Why store dist and lib in npm? Most libraries can be installed by executing npm install command. And how we know prepublish script runs on local npm install (npm-scripts).
So after package have installed we have lib and dist folders.
I don't understand why store this code in npm if only source code is enough?
It appears that repositories include dist directories in order to enable other projects to use them as direct dependencies via git. Compare package.json docs, though as of now this doesn't mention that artefacts need to be present.
Compare NPM: Missing dist and src directories when trying to install directly from a github url for the problem that arises if the dist directory is not checked in.
Alternatively, it is also possible to install from a Git repository directly as long as a prepare stage which builds the package is provided:
{
...
"scripts": {
...
"prepare": "npm run build"
},
...
}
This way, you won't have to store /dist folder in the repository itself