Installation

Installation prerequisites:

1. Install Node.js and NPM: Download Node.js from official website and install it on your system. Reactify works well with Node.js 10.x . NPM comes bundled with Node.js.

2. Install NPM packages: Once you install node on your system, open terminal or command prompt on your system, go to your project root directory & run the following command, it will download all the dependencies under node_modules folder. Please wait for it to finish.

npm install

Before starting development server please make sure you have copied all the project files including hidden files too like .babelrc and .eslintrc

Running development server:

Run following command to run dev server, wait for it to finish and once it finishes access http://localhost:3000/ to run your app/project on browser. The app will automatically reload if you make any changes in any of the source file.

npm start

Production building:

Run following command to build the project and wait for it to finish. The build will be stored in the dist/ directory.

npm run build

Making a Production Build in Different Folder(Sub-Directory):

If you want to make your production build in different folder or sub directory. Like, if you want that the template run on the test.com/dist rather then test.com then you need to follow the steps given below:

Step 1: Open .webpack.config.js file and search for

const publicPath = '/';

and set your path as per requirement like:

const publicPath = '/dist/';

Step 2: Now go to src>App.js file and set the Router basename to dist like following code:

<Router basename={'/dist'}>
            <Switch>
               <Route path="/" component={App} />
            </Switch>
         </Router> 

Step 3: Open .htaccess file and set the roots for subdirectory: We have added the screenshot for the .htaccess file location and also the code of the file.

.htaccess File

.htaccess

# To be inside the /Directory

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /dist/
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /dist/index.html [L]
</IfModule>