Thank you for Purchasing

Oiron - React HTML Landing Page Collection

Version 1.4.1

• Created : 10 Nov 2021
• Latest Update : 29 May 2023

What is Oiron?

Template Feature

• 11 landing page templates. Built with one of most popular javascript library React.JS, Material UI and Next.JS.
• Including HTML vesrion. Built with jQuery, Bootstrap, MaterializeCSS (Material Design) and Pug.js for HTML template engine.
• Various modern design Agency, Cloud, Cryptocurrency, Education, Medical, Marketing, Fintech, Product-Sales, Saas, Saas2 and Social Apps
• Premium designs. Simple and elegant multi color scheme
• Dark Mode. Creative and modern design along with dark mode to make it easy on your eyes.
• RTL Support.Auto RTL adjustment styling with jss-rtl
• More Variant Components. This template including 7 Header type and 4 Footer type, plus Scroll Page Navigator and Chat Panel.
• Support multilanguage. Including 6 translation English, Deutsch, Arabic, Chinese, Bahasa Indonesia, Español.
• 100+ section components and UI modules which reusable and easy to modify.
• Modern Illustration. The most trending design concept, with artwork illustration to increase visitor attractiveness.
• Next Generation JavaScript written in ES6
• Responsive design Based on standard 12 Grid System
• Starter Project. Build app from scratch without without being distracted from innate feature.
• Support mono repo, . Modern architecture to managing modules in multiple project.
• High Performance. Styling with JSS (CSS in JS) and Async Code Splitting.
• Clean code maintained by eslint.
• Fully vector icons and font icons.
• And many more...

Files and Folder Structure

└── packages
    ├── [theme-name]
    │   ├── components
    │   ├── pages
    │   ├── public
    │   ├── theme
    │   └── vendors
    │   └── i18n.js
    │   └── index.js
    │   └── next.config.js
    │   └── now.json
    │   ├── package.json
    │   ├── package-lock.json
    │   └── README.md
    │   └── server.js
    │   └── youtube.js
                        

Installation and Running App

• Connect to the internet
• Install NodeJs from NodeJs Official Page
• Unzip the Oiron file to a folder in your computer
• Open Terminal
• Go to your file project (where you've unzipped the product)
• Go to packages and choose a template. Example packages/agency/
• Install Modules
  Install module dependencies by run this script in terminal

  npm install

  It will download some necessary dependencies, and just wait until finish.
  
  
• For installation by use lerna, please check this link Installation using lerna
• Run App
  After build installation complete, then run the app.

  npm run dev

  The process might take a moment.
  
  INFO:
  - Just run this script whenever you want start the project.
  - Run npm install again if you have new module dependencies,
  
• For agency template please navigate to http://localhost:3001
• Here's the port list for each template

  Template	Port	Landing Page URL
  Starter Project	3000	http://localhost:3000
  Agency Theme	3001	http://localhost:3001
  Cloud Theme	3002	http://localhost:3002
  Cryptocurrency Theme	3003	http://localhost:3003
  Education Theme	3004	http://localhost:3004
  Finance Theme	3005	http://localhost:3005
  Marketing Theme	3006	http://localhost:3006
  Medical Theme	3007	http://localhost:3007
  Product Sales Theme	3008	http://localhost:3008
  Saas	3009	http://localhost:3009
  Saas2	3010	http://localhost:3010
  Social Apps	3011	http://localhost:3011

Build App

Build project

• Here'a bellow an example for agency-theme. You can use the same steps to other packages(projects)
• First you need to build the production assets first

  npm run build

  It usually take longer time than development to generate and compress production code. The generated files will be placed in .next/
• Then start the app

  npm start

• Then navigate to http://localhost:3001
• Node: In Windows system you need to install win-node-env, because setting NODE_ENV=production before command babel doesn't work on Windows. Here's the packages https://www.npmjs.com/package/win-node-env

Build Static HTML

Run the following commands:

npm run build
                        

Then

 npm run export
                        

Now you can see the exported HTML content on a directory called out inside your project. That's a fully functioning static web app. You can deploy it to any static hosting service, and it will work fine. But before we do that, we need to test it out locally. In order to test the app, install the following serve NPM module globally:

npm install -g serve
                        

After you've installed serve, run following commands from /out directory

serve -p 8080
                        

Now you can access your static app in http://localhost:8080. Everything should be working as usual.

Deployment

Deploy to server

• First you have to clone/copy the project in your hosting/cloud server.
• If you haven't install the dependencies before, please run npm install
• Then run npm run build
• Run app in background process

  To run it in background you may try PM2 pm2.keymetrics.io and https://www.npmjs.com/package/pm2. PM2 is a daemon process manager that will help you manage and keep your application online 24/7

  • Install the pm2 globally

    npm install pm2@latest -g

  • Go to project folder i.e packages/agency
  • Create ecosystem file

    pm2 ecosystem

    It will generate ecosystem.config.js in your root project
  • Open ecosystem.config.js. Then Change the script target to ./index.js like this:

                                      
    module.exports = {
      apps : [{
        name      : 'oiron-react', // Your project name
        script    : './index.js', // Change the script target to ./index.js
        env: {
          NODE_ENV: 'development'
        },
        env_production : {
          NODE_ENV: 'production'
        }
      }],
    
      deploy : {
        production : {
          user : 'node',
          host : '212.83.163.1',
          ref  : 'origin/master',
          repo : 'git@github.com:repo.git',
          path : '/var/www/production',
          'post-deploy' : 'npm install && pm2 reload ecosystem.config.js --env production'
        }
      }
    };
                                      
                                    

  • Run the project

    pm2 start ecosystem.config.js --env production

  • Then navigate to http://localhost:3001

Deploy to NOW

Deploy your website quickly, without having to manually configure DNS, SSL, CDN or hosting. Integrate with your favorite tools, and bring your entire team of developers and designers closer together.

• Go to your projects, then npm run now-build. The static HTML will be generated in dist/ folder
• Next just run now --prod to delploy.
• Wait until process finish. Once finish you will get live url yo access it.

Troublehooting

Here's most common error problem when installation and first setup project

Basic Code Structure

Folder structure

project-theme                                                                            
│   ├───components                                                                          
│   ├───pages                                                                               
│   ├───static                                                                              
│   │   ├───favicons                                                                        
│   │   ├───images                                                                          
│   │   ├───locales                                                                       
│   │   └───text                                                                            
│   ├───theme                                                                               
│   └───vendors                                                                             
                        

Code preview

• Landing Page
• Header
• Document Body

Landing Page

Landing page structure /pages/index.js

Header

You can put google analytics, font icon, embeded fonts, etc here. /components/header.js

Document body

/pages/_document.js

Directory Alias

This template use babel-plugin-root-import. So you can call any components or images from root project easly.

Template Architecture

This is template architecture in diagram visuailzation. Click diagram or full screen button to show in new tab with full screen

Starter Project

• You can go through to /packages/starter-project/ folder
• Connect to the internet
• Open Terminal
• The next installation process are same like was described above. Installation Step
• Install module dependencies by run this script in terminal

  npm install

  It will download some necessary dependencies, it could take some minutes, just wait until finish.
• Run App
  

  npm run dev

  
  
  INFO:
  - Just run this script whenever you want start the project.
  - Run npm install again if you have new module dependencies,
  
• Navigate to http://localhost:3000
• After this you can can start develop your app with this initial project. And will bo more suitable when use other ready-template as a reference

UI and Languages

Create New Page

A. Page with SSG(Static Site Generation) support

• This template support translation with Static Site Generation (SSG). If you want to make a page with translation support, please follow this pattern.
  
  About more about static site translation check out this blog post and this example project.
• For example we want to create an "About" page, you need to create to 2 files pages/about.js and pages/[locale]/about.js.

• // pages/about.js
  // Use for redirection by following language param [locale]. It will redirect to pages/[locale]/about.js
  
  import { Redirect } from '../lib/redirect';
  export default Redirect;
                                
                                                              

  // pages/[locale]/about.js
  // It's a real page containing translations or components with translations
  
  import React from 'react';
  import { useTranslation } from 'next-i18next';
  import { getStaticPaths, makeStaticProps } from '../../lib/getStatic';                                
  
  export default function About() {
    const { t } = useTranslation('common');
    return (
      <div>
        <p>This is the about page</p>
        <p>{t('title')}</p>
      </div>
    );
  }
  
  const getStaticProps = makeStaticProps(['common']);
  export { getStaticPaths, getStaticProps };
                                

• Then we can access that page with http://localhost:3000/about or http://localhost:3000/en/about

B. Page with Server Side Translation

• You can use simple translation method in folder react/simple-routing/. So you can skip this section
• By default this template uses SSG method for translation, but it can be used as Server Side Rendering. Please follow this guide to convert as a Server Side Translation Page.
• Setup the configuration
  1. In /next-i18next.config.js set ssg: false
  2. In next.config.js uncomment const { i18n } = require('./next-i18next.config') and i18n, It will look like this:

     // /next-i18next.config.js
     
     const { i18n } = require('./next-i18next.config')
     //... rest import
     
     module.exports = withImages({
       i18n,
       //... rest code
     });
                                   

  3. In pages/_app.js in useEffect() add/uncomment this code

     // /pages/_app.js
     useEffect(() => {
       const { pathname, asPath, query } = router;
       router.push({ pathname, query }, asPath, { locale: curLang });
       // ...rest code
     }, []);
                                   

• Change the all pages file in /pages
  1. Move and replace all files inside pages/[locale]/ to it's parent pages/, Then delete the empty[locale] folder.
  2. Open a page file, example index.js in pages/ folder.
  3. Remove the import of static lib and import serverSideTranslations

     // pages/about.js
     // (-) Remove or disable
     import { getStaticPaths, makeStaticProps } from '~/lib/getStatic';
     
     // (+) Add or enable                              
     import { serverSideTranslations } from 'next-i18next/serverSideTranslations';                             
                                   

  4. Remove the export { getStaticPaths, getStaticProps } and use serverSideTranslations

     // pages/about.js
     // (-) Remove or disable
     const getStaticProps = makeStaticProps(['common']);
     export { getStaticPaths, getStaticProps };
     
     // (+) Add or enable                              
     export const getStaticProps = async ({ locale }) => ({ props: { ...await serverSideTranslations(locale, ['common']) } });
                                   

  5. Here's the complete code

     // pages/about.js
     import React from 'react';
     import { useTranslation } from 'next-i18next';
     // import { getStaticPaths, makeStaticProps } from '~/lib/getStatic';
     import { serverSideTranslations } from 'next-i18next/serverSideTranslations';                             
     
     export default function Home() {
       const { t } = useTranslation('common');
       return (
         <div>
           <p>This is the about page</p>
           <p>{t('title')}</p>
         </div>
       );
     }
     
     // const getStaticProps = makeStaticProps(['common']);
     // export { getStaticPaths, getStaticProps };
     export const getStaticProps = async ({ locale }) => ({ props: { ...await serverSideTranslations(locale, ['common']) } });
                                   

  6. Do this method for all pages. For the faster way, you can use find and replace inside pages/ with code-editor
  7. Remove .next/ folder in root project. This folder might hidden by your OS, so please show it!
  8. Then start the project npm run dev or build npm run dev it to see the result. Please note this method not support for npm run export

Create New Component

• Go to /components/
• Create new folder ex: MyComponent. The name must in capitalize
• Create new js file inside that folder MyComponent, ex SampleComponent.js. The name must in capitalize
• Inside the file create a simple ES6 Class ex:
  

  // file: /components/MyComponent/SampleComponent.js
  
  import React from 'react';
  
  function SampleComponent(){
      return (
        <H1>Hello World</H1>
      );
    }
  }
  
  export default SampleComponent;
  
  

• Open a target page where you want use it. Ex: Open /pages/[locale]/about.js. (Example page that we've made in previous section)
• Import component form component library
  

  import SampleComponent from '~/components/MyComponent/SampleComponent.js'

• Then use it inside render function
  

  return (
    <SampleComponent />
  );
                              

• Here's complete code
  

  // file: /pages/[locale]/about.js
  import React from 'react';
  import Head from 'next/head';
  import { useTranslation } from 'next-i18next';
  import { getStaticPaths, makeStaticProps } from '../../lib/getStatic'; 
  import SampleComponent from '~/components/MyComponent/SampleComponent.js'
  
  export default function About() {
    const { t } = useTranslation('common');
    return (
      <div>
        <Head>
          <title>
            { brand.crypto.name }
            &nbsp; - Blank page
          </title>
        </Head>
        <p>This is the about page</p>
        <p>{t('title')}</p>
        <SampleComponent />
      </div>
    );
  }
  
  const getStaticProps = makeStaticProps(['common']);
  export { getStaticPaths, getStaticProps };
  
  

• Then you can check the result at http://localhost:3000/about or http://localhost:3000/en/about

Clean Code with Eslint

• Go to /next.config.js
• Just uncomment this code bellow

  const withCSS = require('@zeit/next-css')
  const withImages = require('next-images');
  
  module.exports = withImages(
    withCSS({
      publicRuntimeConfig: {
        localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string'
          ? process.env.LOCALE_SUBPATHS
          : 'none',
      },
      webpack: (config, options) => {
        cssModules: true,
        //      config.module.rules.push({
        //          enforce: 'pre',
        //          test: /\.js?$/,
        //          exclude: [/node_modules/],
        //          loader: 'eslint-loader',
        //          options: {
        //            quiet: true,
        //          }
        //      });
        config.node = {
          fs: 'empty'
        }
        return config;
      },
    })
  );

• Then should become like this

  const withCSS = require('@zeit/next-css')
  const withImages = require('next-images');
  
  module.exports = withImages(
    withCSS({
      publicRuntimeConfig: {
        localeSubpaths: typeof process.env.LOCALE_SUBPATHS === 'string'
          ? process.env.LOCALE_SUBPATHS
          : 'none',
      },
      webpack: (config, options) => {
        cssModules: true,
        config.module.rules.push({
           enforce: 'pre',
           test: /\.js?$/,
           exclude: [/node_modules/],
           loader: 'eslint-loader',
           options: {
             quiet: true,
           }
        });
        config.node = {
          fs: 'empty'
        }
        return config;
      },
    })
  );
  

• Run the project npm run dev.
  You will be notified with an error message if your code not clean or consistent. ESLint itself is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs.
  More about elint https://eslint.org/docs/user-guide/getting-started

Icons Used

Material Font Icons

• Please make sure Google Material Icons already embeded in components/head.js.
  If not just embed this inside head tag

  <head>
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
  </head>

• Connect to internet
• Import Material UI Icon to your component

  import Icon from '@material-ui/core/Icon';

• Then add it inside render method. Example for use access_time icon

  <Icon>access_time<Icon />

Material SVG Icons

• Import all necessary icons form Material UI Icons library

  import AccessTime from '@material-ui/icons/AccessTime';
  import Adjust from '@material-ui/icons/Adjust';
  import BatteryStd from '@material-ui/icons/BatteryStd';
                              

• Use them as component in render method

   render() {
    return (
      <div>
        <AccessTime />
        <Adjust />
        <BatteryStd />
      <div />
    );
  }
                              

IonIcons Font

<head>
    <link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>

<span className="ion-ios-world-outline" />  
                          

Sources and Credit

Online Suport

If you have any questions about customization of this template wich are not covered in the documentation feel free to ask a question in the comment section or contact me directly via e-mail form on my profile page.

A product by Ilham Meidi Brata

Enjoy and don’t forget to rate my template.

Thank you very much!

Change Log