https://next-cuba-doc-pixelstrapthemes.vercel.app/_next/static/chu…/installation-93fdb2d83c23dd8c.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[429],{1875:function(e,n,s){(window.__NEXT_P=window.__NEXT_P||[]).push(["/getting_started/installation",function(){return s(7087)}])},6570:function(e,n,s){"use strict";var a=s(5893),i=s(7294),t=function(e){var n=e.code,s=e.lang,t=(0,i.useState)(!1),l=t[0],c=t[1],r=(0,i.useState)(!0),o=(r[0],r[1]);(0,i.useEffect)(function(){setTimeout(function(){o(!1)},1e3)},[]);var d=function(){c(!0),setTimeout(function(){c(!1)},1500),navigator.clipboard.writeText(n)};return(0,a.jsxs)("div",{className:"code-box-copy",children:[(0,a.jsx)("button",{className:"code-box-copy__btn btn-clipboard","data-clipboard-target":"#npmcode",title:"Copy",onClick:function(){d()},children:(0,a.jsx)("i",{className:"fa  ".concat(l?"fa-check":"fa-files-o")})}),(0,a.jsx)("pre",{className:"language-".concat(s||"html"),tabIndex:-1,children:(0,a.jsx)("code",{className:"language-".concat(s||"html"),id:"npmcode",children:n})})]})};n.Z=t},7087:function(e,n,s){"use strict";s.r(n);var a=s(5893);s(7294);var i=s(6570),t=function(){return(0,a.jsxs)("div",{className:"row",children:[(0,a.jsxs)("div",{className:"col-sm-12",children:[(0,a.jsx)("h4",{className:"main-title",id:"installation",children:"Installation"}),(0,a.jsx)("p",{children:"Welcome to React Next! React Next helps you build modern web applications."}),(0,a.jsx)("p",{className:"mb-4",children:"For getting started an React Next application you needs two things as Prerequisites."}),(0,a.jsx)("h4",{className:"sub-title",id:"prerequisites",children:"Prerequisites"}),(0,a.jsxs)("p",{className:"mb-4",children:["Before you begin, make sure your development environment includes ",(0,a.jsx)("b",{children:"Node "}),"and an ",(0,a.jsx)("b",{children:"npm package manager."})]}),(0,a.jsxs)("ol",{children:[(0,a.jsxs)("li",{children:[(0,a.jsx)("h4",{children:"Node.js"}),(0,a.jsx)("p",{children:"Install Node.js using downloaded file"}),(0,a.jsxs)("p",{className:"mb-4",children:["To check your node version, run ",(0,a.jsx)("b",{children:"node -v "}),"in a terminal/console window."]})]}),(0,a.jsxs)("li",{children:[(0,a.jsx)("h4",{children:"Npm package manager"}),(0,a.jsx)("p",{children:"CLI (command line interface), and React apps depend on features and functionality provided by libraries that are available as npm packages. To download and install npm packages, you must have an npm package manager."}),(0,a.jsxs)("p",{children:["This Quick Start uses the npm client command line interface, which is installed with Node.js by default. To check that you have the npm client installed, run ",(0,a.jsx)("b",{children:"npm -v "}),"in a terminal/console window."]}),(0,a.jsxs)("p",{children:["For better understanding React we suggest you to once go through official documentation of React from"," ",(0,a.jsx)("a",{href:"https://reactjs.org/",target:"_blank",rel:"noreferrer",children:(0,a.jsx)("b",{children:"reactjs.org"})})]})]})]})]}),(0,a.jsxs)("div",{className:"col-sm-12",children:[(0,a.jsx)("h4",{className:"sub-title",id:"reactSetup",children:"React Next setup"}),(0,a.jsx)("div",{className:"warning-block mb-4",children:(0,a.jsx)("p",{children:"If you want Cuba theme setup then directly follow next Cuba setup section"})}),(0,a.jsxs)("h5",{className:"inner-sub-title",id:"createInitial",children:[" ","Create Initial application"]}),(0,a.jsx)("p",{children:"Run the npm command create-react-app and provide the name my-app, as shown here:"}),(0,a.jsx)(i.Z,{code:"npx create-next-app@latest"}),(0,a.jsx)("p",{children:"The create-react-app command prompts you for information about features to include in the initial app project. Accept the defaults by pressing the Enter or Return key."}),(0,a.jsxs)("h5",{className:"inner-sub-title",id:"serveApplication",children:[" ","Serve Application"]}),(0,a.jsx)("p",{children:"Go to the workspace folder (my-app)."}),(0,a.jsx)(i.Z,{code:"cd my-app"}),(0,a.jsx)("p",{children:"Launch the server by using the npm command npm start"}),(0,a.jsx)(i.Z,{code:"npm run dev"}),(0,a.jsxs)("h4",{className:"sub-title",id:"buildApplication",children:[" ","Build Application"]}),(0,a.jsx)("p",{children:"Build you application for host on server using below command:"}),(0,a.jsx)(i.Z,{code:"npm run build"}),(0,a.jsx)("p",{children:"It will create one dist file in your theme folder. Make zip of dist folder. so here you are ready to upload your theme on server."}),(0,a.jsx)("p",{children:"If you’re using Apache HTTP Server, you need to create a .htaccess file in the public folder by pastng below code"}),(0,a.jsx)(i.Z,{code:"Options -MultiViews\nRewriteEngine On\nRewriteCond %{REQUEST_FILENAME} !-f\nRewriteRule ^ index.html [QSA,L]"}),(0,a.jsx)("p",{children:" Now upload your dist folder on public folder"})]}),(0,a.jsxs)("div",{className:"col-sm-12",children:[(0,a.jsx)("h4",{className:"sub-title",id:"cubaSetup",children:"Cuba setup"}),(0,a.jsx)("p",{className:"mb-4",children:"If you have already download and install node.js then ignore prerequisites accordingly."}

1),(0,a.jsx)("h5",{className:"inner-sub-title",id:"nodejs",children:"Node.js"}),(0,a.jsxs)("p",{children:["Download latest version of node.js from"," ",(0,a.jsx)("a",{href:"https://nodejs.org",target:"_blank",rel:"noreferrer",children:(0,a.jsx)("b",{children:"nodejs.org."})})]}),(0,a.jsx)("p",{children:"Install Node.js using downloaded file"}),(0,a.jsxs)("p",{className:"mb-4",children:["To check your node version, run ",(0,a.jsx)("b",{children:"node -v "}),"in a terminal/console window."]}),(0,a.jsx)("h5",{className:"inner-sub-title",id:"CubaThemeSetup",children:"Cuba Theme Setup"}),(0,a.jsxs)("ol",{children:[(0,a.jsx)("li",{children:"Download and extract an Cuba themes from themeforest"}),(0,a.jsxs)("li",{children:["Extract it and then go in to theme folder.",(0,a.jsx)(i.Z,{code:"cd theme"})]}),(0,a.jsxs)("li",{children:["Import all dependency by installing npm command",(0,a.jsx)(i.Z,{code:"npm install"})]}),(0,a.jsxs)("li",{children:["Now you are in stage to successfully run Cuba using below command:",(0,a.jsx)(i.Z,{code:"npm start"})]})]})]})]})};n.default=t}},function(e){e.O(0,[774,888,179],function(){return e(e.s=1875)}),_N_E=e.O()}]);