{"id":36,"date":"2019-09-25T04:28:58","date_gmt":"2019-09-25T04:28:58","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=36"},"modified":"2019-10-10T07:18:22","modified_gmt":"2019-10-10T07:18:22","slug":"installation","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/installation\/","title":{"rendered":"Installation"},"content":{"rendered":"\n

Installation prerequisites:<\/a><\/h4>\n\n\n\n
  1. Install Node.js and NPM :<\/strong> Download Node.js from official website<\/a> and install it on your system. Reactify works well with Node.js 10.x <\/strong>. NPM comes bundled with Node.js.<\/li>
  2. Install NPM packages : <\/strong>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.<\/li><\/ol>\n\n\n\n
    npm install <\/pre>\n\n\n\n
    Before starting development server please make sure you have copied all the project files including hidden files too like .babelrc and .eslintrc <\/strong><\/p><\/blockquote>\n\n\n\n
    Running development server :<\/a><\/h5>\n\n\n\n
    Run following command to run dev server, wait for it to finish and once it finishes access http:\/\/localhost:3000\/<\/code><\/a> to run your app\/project on browser. The app will automatically reload if you make any changes in any of the source file.<\/p>\n\n\n\n
    npm start<\/pre>\n\n\n\n
    Production building:<\/a><\/h5>\n\n\n\n
    Run following command to build the project and wait for it to finish. The build will be stored in the dist\/<\/code> directory.<\/p>\n\n\n\n
    npm run build<\/pre>\n\n\n\n
    Making a Production Build in Different Folder(Sub-Directory):<\/a><\/h4>\n\n\n\n
    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<\/code> rather then test.com<\/code> then you need to follow the steps given below:<\/p>\n\n\n\n
    Step 1:<\/strong> Open .webpack.config.js<\/code> file and search for <\/p>\n\n\n\n
    const publicPath = '\/'; <\/pre>\n\n\n\n
    and set your path as per requirement like: <\/p>\n\n\n\n
    const publicPath = '\/dist\/'; <\/pre>\n\n\n\n
    Step 2:<\/strong> Now go to src>App.js<\/code> file and set the Router basename<\/code> to dist<\/code> like following code: <\/p>\n\n\n\n
    <Router basename={'\/dist'}>
        <Switch>
             <Route path=\"\/\" component={App} \/>
        <\/Switch>
    <\/Router>  <\/pre>\n\n\n\n
    Step 3:<\/strong> Open .htaccess<\/code> file and set the roots for subdirectory: We have added the screenshot for the .htaccess<\/code> file location and also the code of the file.\n\n<\/p>\n\n\n\n
    \"\"
    .htaccess File <\/figcaption><\/figure><\/div>\n\n\n\n
    # 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> <\/pre>\n
    \n    
    \n    \n                        <\/i>\n                    <\/a>\n    3    <\/span>\n<\/div>
    \n    \n                        <\/i>\n                    <\/a>\n    2<\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
    Installation prerequisites: 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. Install NPM packages : Once you install node on your system, open terminal or command prompt on your system, go to your project root directory […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/36"}],"collection":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":6,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/36\/revisions"}],"predecessor-version":[{"id":358,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/36\/revisions\/358"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}