{"id":110,"date":"2019-09-25T07:18:52","date_gmt":"2019-09-25T07:18:52","guid":{"rendered":"https:\/\/docs.theironnetwork.org\/reactify\/?page_id=110"},"modified":"2019-10-10T07:27:33","modified_gmt":"2019-10-10T07:27:33","slug":"deployment","status":"publish","type":"page","link":"https:\/\/docs.theironnetwork.org\/reactify\/deployment\/","title":{"rendered":"Deployment"},"content":{"rendered":"\n

To create a production build you need to run the command npm run build<\/code>. It will create the dist<\/code> folder, that contains the production build files. Now you just need to upload the dist<\/code> files on to the server.<\/p>\n\n\n\n

Static Server:<\/a><\/h5>\n\n\n\n

For environments using Node<\/a>, the easiest way to handle this would be to install serve<\/a> and let it handle the rest:<\/p>\n\n\n\n

npm install -g serve
serve -s build<\/pre>\n\n\n\n
Other Solutions:<\/a><\/h5>\n\n\n\n
You don\u2019t necessarily need a static server in order to run a project in production. It works just as fine integrated into an existing dynamic one.<\/p>\n\n\n\n
Here\u2019s a programmatic example using Node<\/a> and Express<\/a>:<\/p>\n\n\n\n
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('\/', function (req, res) {
   res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000);<\/pre>\n\n\n\n
Apache HTTP server:<\/h5>\n\n\n\n
If you\u2019re using Apache HTTP Server<\/a>, you need to create a .htaccess<\/code> file in the public<\/code> folder that looks like this:<\/p>\n\n\n\n
Options -MultiViews
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L] <\/pre>\n\n\n\n
Upload the dist<\/code> files in the public folder.<\/p>\n\n\n\n
Building for Relative Paths:<\/a><\/h5>\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.<\/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    2    <\/span>\n<\/div>
\n    \n                        <\/i>\n                    <\/a>\n    <\/span>\n<\/div><\/div>\n\n","protected":false},"excerpt":{"rendered":"
To create a production build you need to run the command npm run build. It will create the dist folder, that contains the production build files. Now you just need to upload the dist files on to the server. Static Server: For environments using Node, the easiest way to handle this would be to install […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":38,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"_links":{"self":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/110"}],"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=110"}],"version-history":[{"count":3,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/110\/revisions"}],"predecessor-version":[{"id":115,"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/pages\/110\/revisions\/115"}],"wp:attachment":[{"href":"https:\/\/docs.theironnetwork.org\/reactify\/wp-json\/wp\/v2\/media?parent=110"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}