Introduction

Azure Rift is a clean Responsive React template for IT company and Next Generation Tech Startups. This is created for the individuals and companies who have startup business initiatives, IT Solutions or Online Marketing services, Future Startup Business, etc. Also, this template is suitable for Mobile App, Software, Startups, WebApps, SaaS product, and any other business agencies.

Setup Development Environment

To kickstart the development of the web app with Azure Rift, at first you need to setup the react development environment.

Following tools are needed to setup a react dev environment:

  • Node JS

    • NodeJS works as a node package manager behind the scene. It is recommended to download and install the latest version of Node JS from its official site http://nodejs.org/

Preparation

You'll need to install Node.js (Recommended Version) (NPM comes along with it) and serve (a NPM package)

Use command line tool i.e. powershell or terminal and navigate to the project(Azure Rift) root. This is powershell in windows and terminal on mac/linux.

Let's have a look on the setup process:

Use terminal and navigate to the project root.

Then run : npm install

Then run : npm run dev

It'll return something like this in the console:

> project@2.2.0 dev drive:\project

> next

[ wait ] started server on http://localhost:3000

[ event ] compiled successfully

[ event ] build pages: /

[ wait ] compiling

[ event ] compiled successfully

Now, in the browser go to localhost:3000

For Production Build

Run : npm run build

Then Run : npm run start

See the official next.js doc here

Pages and Components Info

  • Default Home Page (/pages/index.js)
  • Home Page Two (/pages/index-2.js)
  • Home Page Three (/pages/index-3.js)
  • Home Page Four (/pages/index-4.js)
  • Home Page Five (/pages/index-5.js)
  • About Page One (/pages/about.js)
  • About Page Two (/pages/about-2.js)
  • Services Page One (/pages/services.js)
  • Services Page Two (/pages/services/style-2.js)
  • Services Page Three (/pages/services/style-3.js)
  • Services Page Four (/pages/services/style-4.js)
  • Service Details Page (/pages/services/service-details.js)
  • Team Page (/pages/team.js)
  • Pricing Page (/pages/pricing.js)
  • Testimonials Page (/pages/testimonials.js)
  • Sign up Page (/pages/auth/sign-up.js)
  • Login Page (/pages/auth/login.js)
  • Faq Page (/pages/faq.js)
  • Coming Soon Page (/pages/coming-soon.js)
  • Contact Page One (/pages/contact.js)
  • Contact Page Two (/pages/contact-2.js)
  • Error Page (/pages/error.js)
  • News Page One (/pages/news/index.js)
  • News Page Two (/pages/news/news-right-sidebar.js)
  • News Details Page (/pages/news/news-details.js)
  • Privacy policy Page (/pages/privacy-policy.js)
  • Terms Conditions Page (/pages/terms-conditions.js)
  • Etc....
Common Components:
  • Navbar Default (/components/Layouts/Navbar.js)
  • Footer (/components/Layouts/Footer.js)
  • GoTop (/components/Shared/GoTop.js)
  • Loader (/components/Shared/Loader.js)
  • Make Your Business (/components/Common/MakeYourBusiness.js)
  • News (/components/Common/News.js)
  • Newsletter (/components/Common/Newsletter.js)
  • Page Banner (/components/Common/PageBanner.js)
  • Partner (/components/Common/Partner.js)
  • Pricing Plan (/components/Common/PricingPlan.js)
  • Service (/components/Common/Service.js)
  • Team Style One (/components/Common/TeamStyleOne.js)
  • Team Style Two (/components/Common/TeamStyleTwo.js)
  • Testimonials Style One (/components/Common/TestimonialsStyleOne.js)
  • Testimonials Style Two (/components/Common/TestimonialsStyleTwo.js)
  • Other Components, etc....

Dependencies

When you will install the npm packages, it'll automatically install dependencies in the node_modules directory.

If you want to install new dependency, please use the below commands in your terminal -

  • npm install package_name --save
  • npm install package_name --save-dev

To remove any dependency, you can use the below command in your terminal -

  • npm uninstall package_name

Change Default Home Page

To change the default home page of Azure Rift template, please follow the steps below -

  • Go to the /pages directory
  • Replace the content of index.js with the content of any other home page file

Fonts

Following fonts are used in Azure Rift template -

  • Raleway
  • Lato

These fonts are being imported from Google fonts CDN. If you want to change them, please modify the link tags inside the <head> section of the HTML files.

Global Style

To globally change color scheme, fonts or any other styles in Azure Rift template, you can do so by modifying the _variables.scss file inside the /assets/scss directory.

You can define or change variables to your preferred styles. For example, to change the primary color, you can modify the following variable - 

                        
                            $primary-color: #455aa2;

Similarly, you can modify other styles like secondary color, text color, etc.

Run SCSS File

Azure Rift template uses SCSS for styling. To compile the SCSS files into CSS, please follow the steps below -

  • Open the terminal and navigate to the /assets/scss directory
  • Run the command npm run scss to compile the SCSS files into CSS
  • The compiled CSS files will be generated inside the /assets/css directory

Credits

Below is a list of resources and libraries that have been used in Azure Rift template: