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

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>

Last updated