What does a reactjs app look like in production?

Asked
Active3 hr before
Viewed126 times

5 Answers

productionreactjs
90%

If you’re benchmarking or experiencing performance problems in your React apps, make sure you’re testing with the minified production build.,If you haven’t yet installed the React DevTools, you can find them here:,To create a production build, make sure that you add these transforms (the order matters):,To create a production build, make sure that you add these plugins (the order matters):

load more v
88%

When running a production build of freshly created Create React App application, there are a number of .js files (called chunks) that are generated and placed in the build/static/js directory:,npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques.,If you're using code splitting to split up your application, this will create additional chunks in the build/static folder as well.,Creating a Production Build

npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques.

npm run build

npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques.

build

npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques.

build / static

npm run build creates a build directory with a production build of your app. Inside the build/static directory will be your JavaScript and CSS files. Each filename inside of build/static will contain a unique hash of the file contents. This hash in the file name enables long term caching techniques.

build / static
load more v
72%

We can see all the "dependencies" and "devDependencies" required by our React app in node_modules. These are as specified or seen in our package.json file. If we just run the ls -l command, we'll see almost 800 sub-directories. This directory gets added to .gitignore so it does not really get uploaded/published as such. Also, once we minimize or compress our code for production, our sample app should be less than 100 KB in size. ,For unit tests, we would follow the same principle of grouping all our related files. Thus, we can add them within the components directory we have as shown below;,Since we changed the default container element Id to "content", we also have to update the same in our index.js as shown below:,Ejecting would mean that all the configuration gets exposed to us and we would be responsible for maintaining all the configuration from that point onward.

1 create - react - app my - sample - app
load more v
65%

Once our project files have been created and our dependencies have been installed, our project structure should look like this:,Once we run this command, a folder named "my-react-app" will be created where we specified on our computer and all of the packages it requires will be automatically installed.,Once we are happy with our app and are ready to publish it, we can build it with the following command:,When you save by using Command/Ctrl + S, you will see our page immediately update to look like this:

Using npx also ensures that we are using latest version of Create React App to create our project:

npx create - react - app my - react - app
load more v
75%

The scripts section of the initial package.json file looks like the following:,Running the development web server is done by executing the start script via:,You can then deploy the content of the build folder to any web server.,Now that you have a first overview of the project structure we need to take a look into the package.json file to get an overview of defined scripts. Scripts can be executed via npm, e.g. to start the development web server, build for production, etc.

The scripts section of the initial package.json file looks like the following:

"scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
},

Other "production-reactjs" queries related to "What does a reactjs app look like in production?"