My app uses Webpack and an Express server. Will I create problems if I run webpack --watch in one terminal tab, and npm run watch in another?
Is there a better way to auto-build after files change, and also refresh the server?
I guess it won't create any problem and if you make any changes in your component, webpack will automatically compile the changes and you need not refresh the server. Use this in your package.json
"scripts": {
"start": "webpack-dev-server --hot"
}
Install by using npm install webpack-dev-server
Hope it helps!
Related
I want to run my app.js using "dev" : "nodemon app.js"
and I have also added "node-sass": "node-sass public/sass/main.scss public/css/style.css -w"
My goal is to run live server using nodemon app.js only once.
And compile sass to css everytime I edit my sass file and press ctrl + S without restarting my server.
I have tried it by adding "dev": " nodemon app.js && node-sass public/sass/main.scss public/css/style.css -w" .This command is running server successfully but its not compiling my sass to css whenever im trying Ctrl + s on sass file.
Use both commands on seperate terminals.
Click the plus sign to open the terminal in the same directory or use git bash.
You can also make another script merging both commands in your package.json.
"scripts": {
"dev":"nodemon app.js",
"node-sass":"node-sass public/sass/main.scss public/css/style.css -w",
"dev:sass":"npm-run-all --parallel node-sass dev"
}
By executing dev:sass, you will run both commands in parallel (note the --parallel flag).
Note: You have to install the "npm-run-all" devDependency to make the script work.
What does yarn build command do ?
Are yarn build and npm build the same? If not what's the difference?
yarn build and npm build are not existing commands by default. I think you mean yarn run build or npm run build.
build is a command which can be specified in your package.json file on the scripts property. See the example below.
{
"name": "mypackage",
"version": "0.1.0",
"scripts": {
"build": "webpack --config webpack.dev.js"
}
}
In this example, build is a shortcut for launching command webpack --config webpack.dev.js. You can use every keyword you want to define some shortcuts to launch commands.
And the only difference between the two commands it's the JS dependency manager you're using, yarn or npm.
More infos :
https://yarnpkg.com/lang/en/
https://www.npmjs.com/
"yarn build
Bundles the app into static files for production." from Create React App by MAD9135.
https://mad9135.github.io/F2020/modules/week3/02-react-tooling/07-create-react-app.html
yarn build is a shortcut of yarn run build
from original documentation:
Reference: https://classic.yarnpkg.com/lang/en/docs/cli/run/#toc-yarn-run-script
its the same i guess the real difference between yarn and npm is the performance and security that yarn provides.
yarn actually installing packages in parallelly and Npm only install one package at a time
And Yarn have more secure dependency.
Yarn is a package manager for your code. Yarn build makes a bundle of apps in one format and shows errors if the app has any problem that will make an error on the server.
What should I do after developing a Vue app with vue-cli?
In Angular there was some command that bundle all the scripts into one single script.
Is there something the same in Vue?
I think you've created your project like this:
vue init webpack myproject
Well, now you can run
npm run build
Copy index.html and /dist/ folder into your website root directory. Done.
If you've created your project using:
vue init webpack myproject
You'd need to set your NODE_ENV to production and run, because the project has web pack configured for both development and production:
NODE_ENV=production npm run build
Copy dist/ directory into your website root directory.
If you're deploying with Docker, you'd need an express server, serving the dist/ directory.
Dockerfile
FROM node:carbon
RUN mkdir -p /usr/src/app
WORKDIR /usr/src/app
ADD . /usr/src/app
RUN npm install
ENV NODE_ENV=production
RUN npm run build
# Remove unused directories
RUN rm -rf ./src
RUN rm -rf ./build
# Port to expose
EXPOSE 8080
CMD [ "npm", "start" ]
in your terminal
npm run build
and you host the dist folder. for more see this video
To deploy your application to prod environment add
"build": "vue-cli-service build --mode prod"
in your scripts in package.json file.
Open your main.js and add
Vue.config.productionTip = false;
right after your imports.
Then open your cli in the project folder and run this command
npm run build
This will make a dist folder in your project directory you may upload that dist folder in your host and your website will be live
If you run into problems with your path, maybe you need to change the assetPublicPath in your config/index.js file to your sub-directory:
http://vuejs-templates.github.io/webpack/backend.html
The vue documentation provides a lot of information on this on how you can deploy to different host providers.
npm run build
You can find this from the package json file. scripts section. It provides scripts for testing and development and building for production.
You can use services such as netlify which will bundle your project by linking up your github repo of the project from their site. It also provides information on how to deploy on other sites such as heroku.
You can find more details on this here
The commands for what specific codes to run are listed inside your package.json file under scripts. Here is an example of mine:
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
If you are looking to run your site locally, you can test it with
npm serve
If you are looking to prep your site for production, you would use
npm build
This command will generate a dist folder that has a compressed version of your site.
THIS IS FOR DEPLOYING TO A CUSTOM FOLDER (if you wanted your app not in root, e.g.
URL/myApp/) - I looked for a longtime to find this answer...hope it helps someone.
Get the VUE CLI at https://cli.vuejs.org/guide/ and use the UI build to make it easy. Then in configuration you can change the public path to /whatever/ and link to it URL/whatever.
Check out this video which explains how to create a vue app using CLI if u need more help: https://www.youtube.com/watch?v=Wy9q22isx3U
For NPM => npm run Build
For Yarn => yarn run build
You also can check scripts in package.json file
You write down the below command being at the project root.
npm run build
First Install Vue Cli Globally
npm install -g #vue/cli
To create a new project, run:
vue create project-name
run vue
npm run serve
Vue CLI >= 3 uses the same vue binary, so it overwrites Vue CLI 2 (vue-cli). If you still need the legacy vue init functionality, you can install a global bridge:
Vue Init Globally
npm install -g #vue/cli-init
vue init now works exactly the same as vue-cli#2.x
Vue Create App
vue init webpack my-project
Run developer server
npm run dev
This command is for start the development server :
npm run dev
Where this command is for the production build :
npm run build
Make sure to look and go inside the generated folder called 'dist'.
Then start push all those files to your server.
One way to do this without using VUE-CLI is to bundle the all script files into one fat js file and then reference that big fat javascript file into main template file.
I prefer to use webpack as a bundler and create a webpack.conig.js in the root directory of project. All the configs such as entry point, output file, loaders, etc.. are all stored in that config file. After that, I add a script in package.json file that uses webpack.config.js file for webpack configs and start watching files and create a Js bundled file into mentioned location in webpack.config.js file.
I think you can use vue-cli
If you are using Vue CLI along with a backend framework that handles static assets as part of its deployment, all you need to do is making sure Vue CLI generates the built files in the correct location, and then follow the deployment instruction of your backend framework.
If you are developing your frontend app separately from your backend - i.e. your backend exposes an API for your frontend to talk to, then your frontend is essentially a purely static app. You can deploy the built content in the dist directory to any static file server, but make sure to set the correct baseUrl
npm run build - this will uglify and minify the codes
save index.html and dist folder in root directory of your website.
free hosting service that you might be interested in -- Firebase hosting.
if you used vue-cli and webpack when you created your project.
you can use just
npm run build command in command line, and it will create dist folder in your project. Just upload content of this folder to your ftp and done.
If you are using npm u can use npm run build but if you are using yarn you can simply run yarn build
If you want to create a build for a domain, you can use the $ npm run build command.
If you're going to build for a sub-domain, follow these instructions:
Create a file that's name is vue.config.js in the root
Write down the below code in the vue.config.js file:
module.export = {
publicPath: '/demo-project',
}
Now run $ npm run build
Note: Use your subdomain name instead of "/demo-project".
If you want to build and send to your remote server you can use cli-service (https://cli.vuejs.org/guide/cli-service.html) you can create tasks to serve, build and one to deploy with some specific plugins as vue-cli-plugin-s3-deploy
We're developing a ReactJS application using Create-React-App, that is served from our Node/Express server that also serves API's. We deploy the whole server to Heroku using node/JS buildpack and trying to get the CRA build step npm run build in postinstall script from the node package.json file as suggested by #mars in this issue.
The issue is that Heroku deployment is failing with this error. Note that this error happen to me sometime locally but then a npm install from the web_app is solving the issue, but not when run in Heroku. I have two related questions:
How to deploy to Heroku a Node/Express app that serves both APIs and a Create-React-App application? I can commit my build directory but this is really not the right way.
Why the react-scripts are disappearing and I have to run multiple times the npm install.
#johnnycon -
This was exactly the issue and I've received the answer from Mars in this github issue post:
#philjoseph, react-scripts is (by default) a devDependency for CRA apps, but Heroku Node buildpack has environment NODE_ENV=production which causes npm install to skip devDeps.
To install those devDeps too:
npm install --only=dev && npm install && npm run build
He also pointed to this excellent repo: https://github.com/mars/heroku-cra-node
I followed this and it works like a charm :)
Since you need "react-scripts" both in development and in production, you can simple move "react-scripts": "1.0.16" from "devDependencies" into "dependencies", so heroku doesn't ignore it.
There's a very simple solution. Before running the start script, Heroku will run a build script if it's in your package.json.
"scripts": {
"start": "node server.js",
"build": "cd client/ && yarn install && yarn build"
}
For Anyone in 2021, Follow Alexander Cherednichenko's VERY SIMPLE advice
Explanation:
As of October 2021, Create-React-App's react-script package has a ton of security vulnerability issues. I'd imagine a few people may run into their "fix" which suggests moving react-scripts to devDependencies. If you're deploying to Heroku this will NOT work. Moving react-scripts to devDependencies will cause this error since Heroku needs react-scripts to build the React app. It'll be fine locally, and you'll be vulnerability free when you run npm audit --production or yarn audit --production. Ultimately, though, Heroku will demand react-scripts is in the regular dependencies section.
The highest voted answer provides a great example repo by Mars Hall (a principal engineer at Heroku) for creating a react app that's served from a node backend. These days, though, it too includes react-scripts in the regular dependencies section of it's react-ui/package.json file.
In addition, since Create-React-App defaults to Yarn these days, the addition of npm install --only=dev will not run nor work (that I could tell based on the node buildpack log). Moreover, it may add testing dependencies that your app definitely won't need in production.
Unfortunately, until Create-React-App decides to do some updates, it's best to just ignore the issues that npm audit brings up (at least the ones related to react-scripts). Since react-scripts is a build tool, it's extremely unlikely for any vulnerabilities raised to be exploited.
P.S. This likely would be better suited as a comment under Alexander Cherednichenko's answer but I was one reputation away from being able to do so.
P.P.S Hopefully someone actually finds this helpful!
Are react-scripts declared as a devDependency or regular dependency in package.json? Since you're building on Heroku and heroku is reading the env variable as production (I'm assuming here), it won't install react-scripts. Try moving react-scripts as a regular dependency and try again.
With other cloud providers, I likely wouldn't follow this path, but with Heroku, it's the path of least resistance I've found. This article goes into a little more detail on your scenario. https://originmaster.com/running-create-react-app-and-express-crae-on-heroku-c39a39fe7851
i was trying exactly the same thing, deploy a create-react-app project to heroku, and was getting react-scripts not found something....
Heroku reads the scripts into package.json and cannot execute them.
The key to overcome this issue is to 'create/publish' the 'scripts' folder, which by default create-react-app does not create it, just to keep things simple.
So by running the eject command $npm run eject, the scripts folder its created as long as the config folder.
After that you can execute again the heroku script e.g. $ git push heroku master
and hopefully it wil deploy everything on Heroku.
More info about eject script on create-react-app documentation
Hope this helps, good luck.
Can you share how your Package.json file Scripts look? I actually deployed to Heroku yesterday and it seems to be working quite ok for me.
Maybe your dependencies are not added correctly in your package.json.
This is how my scripts look (if you don't have any scss/less/sass ignore the first 2 scripts):
"scripts": {
"build-css": "node-sass src/ -o src/",
"watch-css": "npm run build-css && node-sass src/ -o src/ --watch --recursive",
"start": "npm run start:server",
"watch": "npm-run-all --parallel watch-css start:*",
"start:server": "node server/server.js",
"start:client": "react-scripts start",
"build": "npm run build-css && react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"postinstall": "npm run build"}
When running in Development to take advantage of the Hotrealoding I run
npm run watch
And for PROD I run
npm run build
And then I deploy to Heroku. Try to check the logs from Heroku in a separate Terminal window so you can check what is wrong with your deployment.
Simply use heroku logs to display the last 100 lines of your logs.
Or to tail the logs in real-time: heroku logs -t.
Specify Node Environment
Tell heroku what version of heroku we want to use. By default heroku uses older version which will crash our app. you have 2 package.json files, one in client, another one is in the express server side. in express server side add this to package.json
"engines": {
"node": "12.9.1",
"npm": "6.10.2" },
Specify start script
Instruct heroku what command it should run to start up our server. Add this to the server side package.json
"start":"node index.js",
INSTALL HEROKU CLI
Install Heroku Cli
Sudo apt-get update
curl https://cli-assets.heroku.com/install-ubuntu.sh | sh or sudo snap install heroku
In macos
brew install heroku cli
By default heroku uses a git based deployment procedure or workflow.
Git init
Git add .
Git commit -m “initial commit”
Heroku login
Heroku create nameOfTheApp
https://git.heroku.com/nameOfTheApp.git
This link is our deployment target. It is a git repository that we can push our local server to it.
Git remote add heroku https://git.heroku.com/nameOfTheApp.git
Git push heroku master
I had the same problem and happened to solve the problem by adding a few lines in the package.json (the one for the main project not the one in the client side) after seing #Daniel's comment.
What's happenning here is that Heroku is searching for the react scripts that can be used to install the dependecies and build the app on the client side. In my case both of those scripts were missing. In fact this is how my scripts looked like when I had the problem :
...
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"build": "cd client && npm run build",
"client": "cd client && npm start"
},
...
Heroku was expecting the scripts "install-client" and "heroku-postbuild". I just added them and the error dissapeared :
...
"scripts": {
"start": "node server.js",
"dev": "nodemon server.js",
"build": "cd client && npm run build",
"client": "cd client && npm start",
"install-client": "cd client && npm install",
"heroku-postbuild": "npm run install-client && npm run build"
},
...
I hope this would help someone.
For example, to launch locally installed gulp, I have to run the following command from inside of my project:
node_modules/gulp/bin/gulp.js
To be able to launch npm packages only by their name, I want to include node_modules relatively to project's root dir. Is this possible?
P.S
I know how to install npm packages globally, but I'm trying to avoid doing that.
I hope I understand you correctly: You are trying to execute programs like gulp from your local install.
You can set up a npm script like so in your package.json:
package.json
...
"scripts": {
"build": "./node_modules/.bin/gulp"
}
...
Then, you can run gulp via npm run build from your command line. (Or optionally you can type ./node_modules/.bin/gulp)