I've been trying to get up a react and django application. First, I had followed this set of videos here: https://www.youtube.com/watch?v=6c2NqDyxppU&list=PLzMcBGfZo4-kCLWnGmK0jUBmGLaJxvi4j&index=3. There was a bunch of commands that you can see in the description that needed to be run in as well as a lot of copy pasting configuration files.
Later, my friend told me that create-react-app existed and would set up everything needed with just one command. I tried it, and it worked really well. However, there were issues with connecting it to django. The files that came out of create-react-app were different to the ones shown in the video and when I tried searching it up, a few solutions said to use npm run build and pass the build folder into django.
Running a build takes quite a long time and it is not automatic as it was when I had the webpack and babel system. What am I supposed to do to configure create-react-app so that I can get it to update automatically and get it into django.
Some places said that I could edit the config files when I do npm run eject. There is a problem that the package.json files in the tutorial project and the create-react-app project are not the same. The thing that lets the webpack and babel project update is this snippet of code in the package.json file:
"scripts": {
"dev": "webpack --mode development --watch",
"build": "webpack --mode production"
},
I ejected my create-react-app project but create-react-app doesn't use webpack so I won't be able to use this. What do I do?
Related
I am wondering what would the difference be between npm run dev and npm run start.
To my surprise, I could not find much information online about this topic.
Specifically, I'd like to know in the context of React and Next JS.
I noticed that with React, you can start your app by running npm run start, without the need of running a build first. On the other hand, Next JS doesn't seem to behave in the same way (but I could have done something wrong with the setup).
I tried running a new Next app using npm run start, as it's a default script in package.json, but it didn't work. It shows this error: *Error: Could not find a production build*
Instead, running npm run dev created a .next folder, and started the server on port 3000 with no issues.
Can anyone help me understand how this works?
TL;DR: In Next.js, next dev is used to run the app in development mode. On the other hand, next start is used to run the app in production mode, but requires next build to be run first to generate an optimized production build.
Development
When running the Next.js app in development, you'll want to use next dev:
next dev starts the application in development mode with hot-code
reloading, error reporting, and more.
Production
When building the Next.js app for production, you'll want to use next build:
next build creates an optimized production build of your
application. The output displays information about each route.
Size – The number of assets downloaded when navigating to the page
client-side. The size for each route only includes its dependencies.
First Load JS – The number of assets downloaded when visiting the page
from the server. The amount of JS shared by all is shown as a separate
metric.
Followed by either next start, when you want to start the production server:
next start starts the application in production mode. The
application should be compiled with next build first.
Or next export, when exporting the app as static HTML:
next export allows you to export your app to static HTML, which can be
run standalone without the need of a Node.js server.
For more information refer to Next.js CLI docs.
Normally this depend on what is written in your package.json file. For example, in my case, within this file I got:
"scripts": {
"watch": "webpack --watch --watch-poll --progress --color",
"prod": "webpack -p",
"watch2": "webpack --watch --watch-poll --progress --color",
"build": "webpack --config=webpack.prod.config.js --progress --watch-poll -p"
},
so, if I run
npm run watch
I'll be compiling for development and it will be executed:
webpack --watch --watch-poll --progress --color
However, if I run
npm run build
it will be executed:
webpack --config=webpack.prod.config.js --progress --watch-poll -p
and it will compile for production.
I watched lots of videos, and I read lots of documentations, but I couldn't do this subject. Can you help me?
First of all, I have an react app on github, HERE:https://github.com/alper-efe-sahin/portfolio-v2
(It completed app)
I have 2 branch, first MASTER branch, and second GH-PAGES branch.
I created GH-PAGES using codes which are npm run build and npm run deploy.
Also you can see my some package json codes here:
"gh-pages": "^3.2.3",
"deploy": "gh-pages -d build"
"homepage": "https://github.com/alper-efe-sahin/portfolio-v2",
When I try to create github page, it shows my github page, note It's codes. (for instance, it shows react documents, not react codes, not html css etc.)
How can I show my codes like a good website ?
You have the wrong value set at the property homepage in package.json
it should be https://alper-efe-sahin.github.io/portfolio-v2
Also add the script "predeploy": "npm run build" alongside with deploy in scripts so when you run npm run deploy it also builds your app with npm first.
source: The guide I followed for my cra
I'm using react-app-rewired & customize-cra to setup a multi-project monorepo with shared TypeScript code, without ejecting from create-react-app (the setup is described in this answer). The layout is like:
/my-project
|--- /frontend <-Contains the create-react-app
|--- /shared <-Contains some typescript source, used by the CRA
...
It works great locally. The only thing I'm unable to figure out is how to get it deployed to Heroku:
If I use Git to just push the 'frontend' subdirectory (git subtree push --prefix frontend heroku master), the Heroku build of course fails, because it cannot find the source files in /shared - those weren't even pushed to the server.
I tried using the monorepo buildpack as described here, but the result was the same. Build failed, couldn't find source files in /shared.
I've tried the "hacky" solution in the comment here: setting "postinstall": "npm install --prefix frontend in package.json. Although it seemed to build, accessing https://myap123.herokuapp.com and https://myap123.herokuapp.com/frontend yield 404.
I also tried the solution in the comment here: putting release: cd frontend && npm install && npm run build in the procfile. Same behavior: it seems to build, but is not accessible from the browser (404).
While there are many resources about deploying projects from a monorepo, and many others about sharing code between React & Node projects, I've been unable to find anything that actually works for both: share code, and deploy the projects that reference that code to Heroku. At this point, I'm just focused on trying to deploy the frontend.
Any help would be greatly appreciated.
The simple answer (from this thread) is that Heroku provides no proper way to run in a subdirectory. Any solution will be a hack, and those will vary depending on your project layout.
In my case, I got it working by putting a package.json in the root of the repo with:
{
"scripts": {
"postinstall": "npm install --prefix backend && npm run build --prefix backend",
"start": "node backend/dist/app.js"
}
}
This did not require a procfile. If it's a typescript project, make sure the backend's package.json's script tag has "build": "tsc".
For the frontend, I gave up on Heroku. Instead, I just deployed the frontend to Netlify, which lets you easily deploy from a (pre-built) subdir. So between using Netlify for frontend & the above hack for backend, I have a hacked-together working stack, until Heroku hopefully gets around to properly letting you specify a subdirectory from which to run (they claim they've been waiting for NPM Workspaces, which was completed as of NPM 7).
To build an ExtJS application using sencha cmd I used the command below
sencha app build
But how I can build using open tooling? The docs is not clean about build application with open tooling.
npm run build should do the job
Check your package.json, you normally have a script section
You could build the app using the commands
npm run build:desktop
npm run build:phone
The above commands used based on the package.json file script section.Below is the snippet of code of script section of package.json file.
"scripts": {
"start": "npm run dev:desktop",
"clean": "rimraf build",
"dev:desktop": "webpack-dev-server --env.profile=desktop --env.browser=yes --env.verbose=no",
"dev:phone": "webpack-dev-server --env.profile=phone --env.browser=yes --env.verbose=no",
"build:desktop": "npm run clean && cross-env webpack --env.profile=desktop --env.environment=production --env.treeshake=yes",
"build:phone": "npm run clean && cross-env webpack --env.profile=phone --env.environment=production --env.treeshake=yes"
}
We were suffering a lot and spent significant effort to find the tooling what suits our needs the best. Finally we ended up using webpack because there is a large ecosystem around that so it opened up endless possibilities.
Although sencha did some webpack plugins but they are mostly just watching changes. Therefore we have created a webpack loader what is resolving ext's dependencies. This webpack loader will allow to use webpack to build your ext project. There is a small sample to help to configure it.
I've been working with a React project using create-react-app and I have two options to start the project:
First way:
npm run start with the definition at the package.json like this:
"start": "react-scripts start",
Second way:
npm start
What is the difference between these two commands? And, what is the purpose of the react-scripts start?
I tried to find the definition, but I just found a package with this name. I still don't know what is the use of this command?
create-react-app and react-scripts
react-scripts is a set of scripts from the create-react-app starter pack. create-react-app helps you kick off projects without configuring, so you do not have to setup your project by yourself.
react-scripts start sets up the development environment and starts a server, as well as hot module reloading. You can read here to see what everything it does for you.
with create-react-app you have following features out of the box.
React, JSX, ES6, and Flow syntax support.
Language extras beyond ES6 like the object spread operator.
Autoprefixed CSS, so you don’t need -webkit- or other prefixes.
A fast interactive unit test runner with built-in support for coverage reporting.
A live development server that warns about common mistakes.
A build script to bundle JS, CSS, and images for production, with hashes and sourcemaps.
An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.
Hassle-free updates for the above tools with a single dependency.
npm scripts
npm start is a shortcut for npm run start.
npm run is used to run scripts that you define in the scripts object of your package.json
if there is no start key in the scripts object, it will default to node server.js
Sometimes you want to do more than the react scripts gives you, in this case you can do react-scripts eject. This will transform your project from a "managed" state into a not managed state, where you have full control over dependencies, build scripts and other configurations.
As Sagiv b.g. pointed out, the npm start command is a shortcut for npm run start. I just wanted to add a real-life example to clarify it a bit more.
The setup below comes from the create-react-app github repo. The package.json defines a bunch of scripts which define the actual flow.
"scripts": {
"start": "npm-run-all -p watch-css start-js",
"build": "npm run build-css && react-scripts build",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",
"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"start-js": "react-scripts start"
},
For clarity, I added a diagram.
The blue boxes are references to scripts, all of which you could executed directly with an npm run <script-name> command. But as you can see, actually there are only 2 practical flows:
npm run start
npm run build
The grey boxes are commands which can be executed from the command line.
So, for instance, if you run npm start (or npm run start) that actually translate to the npm-run-all -p watch-css start-js command, which is executed from the commandline.
In my case, I have this special npm-run-all command, which is a popular plugin that searches for scripts that start with "build:", and executes all of those. I actually don't have any that match that pattern. But it can also be used to run multiple commands in parallel, which it does here, using the -p <command1> <command2> switch. So, here it executes 2 scripts, i.e. watch-css and start-js. (Those last mentioned scripts are watchers which monitor file changes, and will only finish when killed.)
The watch-css makes sure that the *.scss files are translated to *.cssfiles, and looks for future updates.
The start-js points to the react-scripts start which hosts the website in a development mode.
In conclusion, the npm start command is configurable. If you want to know what it does, then you have to check the package.json file. (and you may want to make a little diagram when things get complicated).
succinctly - it runs this
node node_modules/react-scripts/bin/react-scripts.js start
"start" is a name of a script, in npm you run scripts like this npm run scriptName, npm start is also a short for npm run start
As for "react-scripts" this is a script related specifically to create-react-app
npm start is the short form for npm run start
You can check about it here Difference between npm start and npm run start
react-scripts start
react-scripts is a set of scripts to support the creation, development and testing of react applications. It is used by create-react-app.
create-react-app is the officially supported way to create single-page React applications. create react app uses webpack to parse and bundle the application.
webpack parses the application and creates a dependency graph from its entry point specified in the webpack config file. while parsing, webpack uses babel to transpile the application to JavaScript, which has better support across browsers.
Webpack uses the generated dependency graph to create a single JavaScript file consisting of the application source code and modules used by the app, injects the file via script tag into public/index.html, and starts a development server on http://localhost:3000. Navigating to this URL in the browser will show a live, interactive instance of your application. Any changes saved to the source code will reflect in the running app instance automatically.
You can read more about this topic more on here