How to make a dist reactjs app?

Question

I am new using Reactjs, and now I need to deploy my react js app on my shared hosting.

I use: create-react-app myapp

And to run it on dev with npm start.

I've tried many suggestions using browserify and webpack, but until now still no success.

or maybe there is another way to make a dist bundle for my react app?

maybe like npm run publish or something like that?

This is my webpack config :

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'docs'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            { 
                test: /\.jsx?$/, 
                loader: 'babel-loader', 
                exclude: /node_modules/ 
            },
            {
                test: /\.css$/,
                use: [ 'style-loader', 'css-loader' ]
            },
            { test: /\.svg$/, loader: 'svg-loader?pngScale=2' }
        ]
    },
    devServer: {
        contentBase: './docs'
    }
};

Answer 1

npm run build

npm run build creates a build directory with a production build of your app. Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js are served with the contents of the /static/js/main.<hash>.js file. For more information see the production build section.

Answer 2

If you are using the create react app, so for creating the production build you have to run the :- npm run build or yarn build

The app for production to the build folder.

To edit webpack configuration in create react app npm run eject.

Running this command copies all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. Commands like npm start and npm run build will still work, but they will point to the copied scripts so you can tweak them. At this point, you’re on your own.