cruip / open-react-template

A free React / Next.js landing page template designed to showcase open source projects, SaaS products, online services, and more. Made by

Free React / Next.js landing page template

Open is a free React / Next.js landing page template built with Tailwind CSS for developers/makers who want to create a quick and professional landing page for their open source projects, SaaS products, online services, and more.

Use it for whatever you want, and be sure to reach us out on Twitter if you build anything cool/useful with it.

Created and maintained with ❤️ by Cruip.com.

Version 1.0.0 built with the Cruip CSS is available here. Version 2.0.3 built with Tailwind CSS and React + Vite is available here.

Live demo

Check the live demo here 👉️ https://open.cruip.com/

Open PRO

Design files

If you need the design files, you can download them from Figma's Community 👉 https://bit.ly/401KSUS

Usage

This is a Next.js project bootstrapped with create-next-app.

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev

Open http://localhost:3000 with your browser to see the result.

You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.

API routes can be accessed on http://localhost:3000/api/hello. This endpoint can be edited in pages/api/hello.ts.

The pages/api directory is mapped to /api/*. Files in this directory are treated as API routes instead of React pages.

This project uses next/font to automatically optimize and load Inter, a custom Google Font.

Learn More

To learn more about Next.js, take a look at the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Learn Next.js - an interactive Next.js tutorial.

You can check out the Next.js GitHub repository - your feedback and contributions are welcome!

Deploy on Vercel

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out our Next.js deployment documentation for more details.

Support notes

This template has been developed with the App Router (app) and React Server Components. If you’re unfamiliar with these beta features, you can find more information about them on the Next.js beta documentation page. So, please note that any request dealing with React (e.g. extra features, customisations, et cetera) is to be considered out of the support scope.

For more information about what support covers, please see our (FAQs)[https://cruip.com/faq/].

Credits

• Nucleo

Terms and License

• Released under the GPL.
• Copyright 2023 Cruip.
• Use it for personal and commercial projects, but please don’t republish, redistribute, or resell the template.
• Attribution is not required, although it is really appreciated.

About Us

We're an Italian developer/designer duo creating high-quality design/code resources for developers, makers, and startups.

Stay in the loop

If you would like to know when we release new resources, you can follow us on Twitter, or you can subscribe to our monthly newsletter.

open-react-template's Issues

Error implementing components

Hi when I try to implement components such as Carousel I am getting the following error messages:

./src/views/About.js
Line 20:12: 'Carousel' is not defined react/jsx-no-undef
Line 21:4: 'CarouselItem' is not defined react/jsx-no-undef
Line 22:4: 'CarouselItem' is not defined react/jsx-no-undef
Line 23:4: 'CarouselItem' is not defined react/jsx-no-undef
Line 24:4: 'CarouselItem' is not defined react/jsx-no-undef

I understand that this is probably because I am not calling the Carousel component into my About.js file however I am unusre how to call this. The same happens with all componets. I am using the following code:

import React from 'react';
import GenericSection from '../components/sections/GenericSection';
import SectionHeader from '../components/sections/partials/SectionHeader';
import Cta from '../components/sections/Cta';

class About extends React.Component {
render() {

const sectionHeader = {
title: 'About us'
}

return (
<React.Fragment>
<GenericSection>
<SectionHeader data={sectionHeader} className="center-content" />
<p>

<Carousel>
<CarouselItem>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups.</CarouselItem>
<CarouselItem>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.</CarouselItem>
<CarouselItem>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form.</CarouselItem>
<CarouselItem>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.</CarouselItem>
</Carousel>

</p>
</GenericSection>
<Cta topDivider split />
</React.Fragment>
);
}
}
export default About;

Please forgive me if this is posted in the wrong place I am an abosolute begginer at react.

Thank you in advance for any help.

Requires Node 14 to run

This template is really great, but I could only get "npm install" to run successfully with Node 14 (not with current LTS 16). With Node 16 lots of errors are returned, would be helpful to document in the Readme as a prerequisite, or update the source code to Node 16.

Awesome work though, thanks for creating this! Happy to upload logs from "npm install" with Node 16 if needed, however is easy to reproduce with a fresh clone.

How to have new routes ?

Hello and thanks for sharing this layout which will definitely help a few.

I am reading your source code and tried to add a new route and a link for it in the menu using react-router-dom.

The route works fine, except when I refresh, the content between the header and the footer is hidden, I have to trigger the route once more to get the content displayed. It work fine on the landing page. Using that layout, is it possible to have other route always display their content, especially when doing F5 ?

Thanks a lot for sharing!

Strange SassError?

Thank you so much for this awesome template! One thing - I've been using it for a little while and never run into issues (aside from some occasional package upgrades as necessary). When developing today, though, I started getting:
SassError: $string: null is not a string.

SassError: $string: null is not a string. ╷ 3 │ font-family: unquote(get-font-family($elem)); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ src/assets/scss/core/abstracts/_mixins.scss 3:15 font-family() src/assets/scss/core/base/_typography.scss 21:2 @import

Trying to get up to speed with the scss here, and wondering if anyone else is seeing the same? Maybe just a webpack issue in my config?

Anyways, thanks again! Please close this if this is not something others are experiencing.

Adding new routes doesn't work

So I was trying to add a Privacy page after adding a 404 page.
When accessing the Privacy page I only get the 404 page but the page is on /privacy.

   import Home from './views/Home';

   import NoPage from './views/NoPage';

   import Privacy from './views/Privacy';

   <AppRoute exact path="/" component={Home} layout={LayoutDefault} />

   <AppRoute exact path="*" component={NoPage} layout={LayoutDefault} />

   <AppRoute exact path="/privacy" component={Privacy} layout={LayoutDefault} />

can't add new routes

hi I'm trying to add new routes, but when i try to access to the new url it show Not Found

The requested URL was not found on this server

This is the code

import Home from './views/Home';
import Joinform from './views/Joinform';

<Switch>
          <AppRoute exact path="/" component={Home} layout={LayoutDefault} />
          <AppRoute exact path="/join" component={Joinform} layout={LayoutDefault} />
        </Switch>

How to incorporate this with an app that is already using react-router-dom?

Dear Developers,
Thank you so much for creating such a nice LP for startups. I tried and it looks beautiful.
Unfortunately I was not able to incorporate it with my existing app that is using react-router-dom. I already have bunch of existing paths specified and I do not see any way to incorporate your home page. I will appreciate if you can share an example where this is incorporated with other paths.

Failed to install dependencies

When I run "npm install" I get this error code:

npm ERR! code 1
npm ERR! path D:\Desktop\dev\open-react-template\node_modules\node-sass
npm ERR! command failed
npm ERR! command C:\WINDOWS\system32\cmd.exe /d /s /c node scripts/build.js
npm ERR! Building: C:\Program Files\nodejs\node.exe D:\Desktop\dev\open-react-template\node_modules\node-gyp\bin\node-gyp.js rebuild --verbose --libsass_ext= --libsass_cflags= --libsass_ldflags= --libsass_library=
npm ERR! gyp info it worked if it ends with ok
npm ERR! gyp verb cli [
npm ERR! gyp verb cli 'C:\Program Files\nodejs\node.exe',
npm ERR! gyp verb cli 'D:\Desktop\dev\open-react-template\node_modules\node-gyp\bin\node-gyp.js',
npm ERR! gyp verb cli 'rebuild',
npm ERR! gyp verb cli '--verbose',
npm ERR! gyp verb cli '--libsass_ext=',
npm ERR! gyp verb cli '--libsass_cflags=',
npm ERR! gyp verb cli '--libsass_ldflags=',
npm ERR! gyp verb cli '--libsass_library='
npm ERR! gyp verb cli ]
npm ERR! gyp info using [email protected]
npm ERR! gyp info using [email protected] | win32 | x64
npm ERR! gyp verb command rebuild []
npm ERR! gyp verb command clean []
npm ERR! gyp verb clean removing "build" directory
npm ERR! gyp verb command configure []
npm ERR! gyp verb check python checking for Python executable "python2" in the PATH
npm ERR! gyp verb which failed Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (D:\Desktop\dev\open-react-template\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (D:\Desktop\dev\open-react-template\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (D:\Desktop\dev\open-react-template\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb which failed python2 Error: not found: python2
npm ERR! gyp verb which failed at getNotFoundError (D:\Desktop\dev\open-react-template\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (D:\Desktop\dev\open-react-template\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (D:\Desktop\dev\open-react-template\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! gyp verb which failed }
npm ERR! gyp verb check python checking for Python executable "python" in the PATH
npm ERR! gyp verb which failed Error: not found: python
npm ERR! gyp verb which failed at getNotFoundError (D:\Desktop\dev\open-react-template\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (D:\Desktop\dev\open-react-template\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (D:\Desktop\dev\open-react-template\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp verb which failed python Error: not found: python
npm ERR! gyp verb which failed at getNotFoundError (D:\Desktop\dev\open-react-template\node_modules\which\which.js:13:12)
npm ERR! gyp verb which failed at F (D:\Desktop\dev\open-react-template\node_modules\which\which.js:68:19)
npm ERR! gyp verb which failed at E (D:\Desktop\dev\open-react-template\node_modules\which\which.js:80:29)
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\which\which.js:89:16
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\isexe\index.js:42:5
npm ERR! gyp verb which failed at D:\Desktop\dev\open-react-template\node_modules\isexe\windows.js:36:5
npm ERR! gyp verb which failed at FSReqCallback.oncomplete (node:fs:198:21) {
npm ERR! gyp verb which failed code: 'ENOENT'
npm ERR! gyp verb which failed }
npm ERR! gyp verb could not find "python". checking python launcher
npm ERR! gyp verb could not find "python". guessing location
npm ERR! gyp verb ensuring that file exists: C:\Python27\python.exe
npm ERR! gyp ERR! configure error
npm ERR! gyp ERR! stack Error: Can't find Python executable "python", you can set the PYTHON env variable.
npm ERR! gyp ERR! stack at PythonFinder. (D:\Desktop\dev\open-react-template\node_modules\node-gyp\lib\configure.js:509:16)
npm ERR! gyp ERR! stack at FSReqCallback.oncomplete (node:fs:198:21)
npm ERR! gyp ERR! System Windows_NT 10.0.19043
npm ERR! gyp ERR! command "C:\Program Files\nodejs\node.exe" "D:\Desktop\dev\open-react-template\node_modules\node-gyp\bin\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
npm ERR! gyp ERR! cwd D:\Desktop\dev\open-react-template\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.13.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\masch\AppData\Local\npm-cache_logs\2022-01-14T11_49_52_249Z-debug-0.log

Does this project require an older version of node? Is there a quick fix?

Fast refresh not working

The project reloads immediately after making changes, but fast refresh does not work, how do i fix this?

Deploy to GH-Pages

@pasqualevitiello @puneetsingh13 thanks for a great project!

I came across an issue when trying to deploy to gh-pages. Note: This is not an issue with your code, but a common problem related gh-pages when using react-router-dom. The solution is to use HashRouter to tell the router to keep looking inside the current gh-pages path, so that App.js return looks something like this:

 <ScrollReveal
      ref={childRef}
      children={() => (
        <HashRouter basename="/">
        <Switch>
          <AppRoute exact path="/" component={Home} layout={LayoutDefault} />
        </Switch>
        </HashRouter>
      )} />

This is well described here: https://medium.com/@bennirus/deploying-a-create-react-app-with-routing-to-github-pages-f386b6ce84c2 and I thought you might consider adding this to your readme.

Document for user

'react-scripts' is not recognized as an internal or external command,

1. npm start results in this error "'react-scripts' is not recognized as an internal or external command"
2. i have react installed.
3. I checked my react installation and it works find for other repos

[edit]
Its fixed now

1. run npm install ( i ran it before but i had an error )
2. run npm start

writing it here so that other people can fix it ( i suggest having possible error fixes in a document )

Can't acess the value on Input.

Hey nice template!

Can you help me get the input value on the e-mail?

Thanks

Uncaught Error: [AppRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Hello,

I've updated react-router-dom from v5 to v6 and facing this issue :

Uncaught Error: [AppRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
    at invariant (index.tsx:19:1)
    at index.tsx:776:1
    at react.development.js:1104:1
    at react.development.js:1067:1
    at mapIntoArray (react.development.js:964:1)
    at mapChildren (react.development.js:1066:1)
    at Object.forEachChildren [as forEach] (react.development.js:1103:1)
    at createRoutesFromChildren (index.tsx:760:1)
    at Routes (index.tsx:339:1)
    at renderWithHooks (react-dom.development.js:14985:1)

Unable to run because of vite error

Hi

Thank you for your wonderful code.

I cloned this repo and ran npm install and then npm run dev_ and encountered the following error:

npm run -v
6.14.5

MacBook-Pro:open-react-template username$ npm run dev

> [email protected] dev /Users/username/Documents/Other/OMA Parent/Programming/OurMasjidApp/open-react-template
> vite

(node:8530) ExperimentalWarning: The ESM module loader is experimental.
file:///Users/username/Documents/Other/OMA%20Parent/Programming/OurMasjidApp/open-react-template/node_modules/vite/bin/vite.js:7
    await import('source-map-support').then((r) => r.default.install())
    ^^^^^

SyntaxError: Unexpected reserved word
    at Loader.moduleStrategy (internal/modules/esm/translators.js:81:18)
    at async link (internal/modules/esm/module_job.js:37:21)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] dev: `vite`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/username/.npm/_logs/2023-04-08T08_44_34_635Z-debug.log
username-MacBook-Pro:open-react-template username$ 

package.json

{
  "name": "open-pro-react",
  "version": "0.1.0",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "@tailwindcss/forms": "^0.5.3",
    "aos": "^3.0.0-beta.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.1",
    "react-transition-group": "^4.4.5"
  },
  "devDependencies": {
    "@vitejs/plugin-react": "^3.1.0",
    "autoprefixer": "^10.4.13",
    "postcss": "^8.4.21",
    "tailwindcss": "^3.2.6",
    "vite": "^4.1.1"
  }
}

Chrome <54 = Uncaught TypeError: Object [object HTMLImageElement] has no method 'before' Image.js:47

This error shows up even with lastest "import 'core-js';"

Chrome 30.0.1573.2 fails to process
https://developer.mozilla.org/en-US/docs/Web/API/ChildNode/before
.before() olny works with Chrome >54
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML
.insertAdjacentHTML('beforebegin') works with Chrome >1

below is my suggestion:

  const handlePlaceholder = (img) => {
    const placeholder = document.createElement('img');
    if (!loaded) {
      img.style.display = 'none';
      img.before(placeholder);
      placeholder.src = placeholderSrc(

change to:

  const handlePlaceholder = (img) => {
    if (!loaded) {
      img.style.display = 'none';
      var randomid = 'r'+Math.floor(Math.random() * 10000);
      img.insertAdjacentHTML('beforebegin','<img class="random-'+randomid+'" src="data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 '+img.getAttribute('width')+' '+img.getAttribute('height')+'"%3E%3C/svg%3E" width="'+img.getAttribute('width')+'" height="'+img.getAttribute('height')+'">')
      const placeholder = document.querySelector('img.random-'+randomid)
      placeholder.src = placeholderSrc(```

SCSS changes are not applied in built version

Steps to reproduce

• Clone the repo, edit https://github.com/cruip/open-react-template/blob/master/src/assets/scss/settings/base/_colors.scss#L4 , especially the app background color and main font color
• deploy on any hosting website, such as netlify

Expected behavior

The style should be the same on the deployed version as on the dev version

Actual result

Deployed:

Dev:

As you can see, some assets are not displayed (waves in the top right corner), and the color palette is messed up.

SUper nice thee, but wonder why react for a single page?

Super ncei theme and love the colors, nice simple layer, works flawless.

I was looking a bit into this repo and keep wondering, why use react to make such single-page website. Doesnt that make a single page way to complicated?

Source map error: Error: NetworkError when attempting to fetch resource. : browser-polyfill.js.map

Appreciate you releasing this template.

Unfortunately, site loads locally perfectly. But on server, console reports:

Source map error: Error: NetworkError when attempting to fetch resource.
Resource URL: moz-extension://d9a3913d-909e-054a-8001-d5214d0468ea/browser-polyfill.js
Source Map URL: browser-polyfill.js.map

Any suggestions? (Note: I'm new to React. Searched for answers online but found none: perhaps I damaged the template when making changes.)

Thanks in advance!

Jhave

Error while starting your front-end

||= operator, which is not recognized by the JavaScript engine.

Error when deploying to vercel

When I download the repo and immediately deploy to vercel with default settings, I get a 404 error when accessing my deployment

Outdate node-sass will throw an error during is npm install

Downloading binary from https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-88_binding.node
Cannot download "https://github.com/sass/node-sass/releases/download/v4.14.1/win32-x64-88_binding.node":

HTTP error 404 Not Found

Hint: If github.com is not accessible in your location
      try setting a proxy via HTTP_PROXY, e.g.

      export HTTP_PROXY=http://example.com:1234

Open Pro issue

I'd submit a PR if open pro were open source, but you have an issue in Tabs.js:

const heightFix = () => {

    if (tabs.current.children[tab]) {

         tabs.current.style.height = tabs.current.children[tab - 1].offsetHeight + "px";

    }

};

The issue is the children[tab] should be children[tab-1].

Thanks,
James

Hello, which node.js version are you using in the project?

Hello, good morning. Which version of node js are you currently using in the project? i tried to install it with npm and with yarn and it was impossible, gave me tons of errors. I was using v16.13.0

Redirecting to different pages

Using your code, I want to know how to redirect,

Ex: user types in data and click a button, after clicking the button it verifies that the data, next if verification complete it will send them to a different page.

I've tried:

import { useRouter } from 'next/navigation'
import { redirect } from 'next/navigation'

We could add an even more informative and dropdown based navbar components in addition to the ones already present.

In depth, I propose to add new buttons which on hovering displays a drop-down.
Example can be seen of the said navbar here: http://taxvisor.in/
I think it would be a good addition.
If you agree, I would love to add this feature in your template.

Cannot read property 'toLowerCase' of undefined

How to change the color of the top right "waves"

Hi! I struggle for hours to find the color var of theese waves on the top right of the landing page.
Could you please help me out?
Cheers

sass missing variable src/assets/scss/core/elements/_forms.scss is missing check-checked-inverse

I am encountering the following error after updating some deps:

Cannot read property 'toLowerCase' of undefined
CompileError: Begins at CSS selector .invert-color .form-checkbox input:checked,.invert-color .form-radio input:checked

After digging, it seems that this is due to src/assets/scss/core/elements/_forms.scss:

	.form-checkbox,
	.form-radio {

		input {

			&:checked {
				background-color: color-bg(check-checked-inverse) !important;
				border-color: color-bg(check-checked-inverse) !important;
			}
		}
	}

Removing !important works, however, this will never work unless check-checked-inverse is set somewhere, adding to src/assets/scss/settings/base/_colors.scss:

// Misc elements: background color
$bg--color: (
	body: 			get-color(dark, 1),
	body-shadow:	0 20px 48px rgba(get-color(dark, 1), .8),	// body shadow when a boxed layout is used (set to null if don't want a shadow)
	body-outer:		lighten(get-color(dark, 1), 2%),			// outer bg color when a boxed layout is used
	bg-color: 		lighten(get-color(light, 1), 9%),			// .has-bg-color helper class
	shadow: 		0 24px 64px rgba(get-color(dark, 1), .64),	// .has-shadow helper class
	code: 			darken(get-color(dark, 1), 3%),
	code-inverse:	darken(get-color(dark, 1), 3%),
+	check-checked-inverse:	darken(get-color(dark, 1), 3%)
);

Will fix the error (not sure if this is the right color thought)

Cannot read property 'toLowerCase' of undefined

Dear Cruip Team,
When I try to run npm run build, I get this error. I'm still a beginner in React and I would appreciate any help regarding this 🚀

Error:
Cannot read property 'toLowerCase' of undefined
CompileError: Begins at CSS selector .invert-color .form-checkbox input:checked, .invert-color .form-radio input:checked

Screenshot:

feat-UI is overlapping on mobile view

Features need to fix.

Bootstrap landing page is overlapping with logo
Search box is is overlapping with admin dashboard box.

Assign me this issue to work.

Syntax error

quico@cybermovi:~/open-react-template$ npm run dev

[email protected] dev
next dev

/home/quico/open-react-template/node_modules/next/dist/lib/picocolors.js:130
const { env, stdout } = ((_globalThis = globalThis) == null ? void 0 : _globalThis.process) ?? {};
^

SyntaxError: Unexpected token '?'
at wrapSafe (internal/modules/cjs/loader.js:915:16)
at Module._compile (internal/modules/cjs/loader.js:963:27)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
at Module.load (internal/modules/cjs/loader.js:863:32)
at Function.Module._load (internal/modules/cjs/loader.js:708:14)
at Module.require (internal/modules/cjs/loader.js:887:19)
at Module.mod.require (/home/quico/open-react-template/node_modules/next/dist/server/require-hook.js:64:28)
at require (internal/modules/cjs/helpers.js:74:18)
at Object. (/home/quico/open-react-template/node_modules/next/dist/build/output/log.js:55:21)
at Module._compile (internal/modules/cjs/loader.js:999:30)

Deploying to fixed domain hostings with path results in a black page

Deploy to domain hostings with no path in the url, like netlify, works just fine...
For example: open-react-template on netlify.
It is deployed with no homepage key in package.json, and output.publicPath in webpack.config.js set to "/".

Deploy to domain hostings with a path in the url, like github pages, or gitlab pages (or even http://localhost/open-react-template), results in a black page...
For example: open-react-template on gitlab.
It is deployed with homepage key in package.json set to "/open-react-template" and output.publicPath in webpack.config.js set to "/open-react-template/".

No JS nor network errors in console, just a blak page... :-(

For sure I'm missing something in webpack config...

Provide a simple basic guide how to deploy to major cloud hosting sites

A simple basic guide how to deploy to major cloud hosting sites (say: AWS/Heroku/Github pages/Gitlab pages) should be welcome.

I ask because I did try to deploy to gitlab pages following basic indications compiling a .gitlab-ci.yml file and faced a lot of hurdles and errors.

After reloading the page, the page scrolls down a little

Thank you for the free theme. Loving it. Leaning towards buying the premium soon.

After you refresh the page, the y scrollbar scrolls a little. Can't seem to find the offset setting within the code.

Thanks.

Why don't you use react functional components and hooks?

Hey guys, thanks for the template.

I've bought and worked on your premium template and I'm interested why don't you use react functional components and hooks?
Also, your styling approach does not look elegant (unlike design 👍), have you considered other options? Like CSS frameworks or styled-component

SCSS error. Not compatible with latest Node versions

./src/assets/scss/style.scss (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/assets/scss/style.scss)
SassError: $string: null is not a string.
╷
3 │ font-family: unquote(get-font-family($elem));
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
src\assets\scss\core\abstracts_mixins.scss 3:15 font-family()
src\assets\scss\core\base_typography.scss 21:2 @import
../assets\scss\style.scss 38:9 root stylesheet

Test Suites: 1 failed, 1 total

$ export REACT_APP_GA_CODE=123
$ yarn test

FAIL  src/App.test.js
  ● Test suite failed to run

    TypeError: Cannot read property 'parentNode' of undefined

      12 | 
      13 | // Initialize Google Analytics
    > 14 | ReactGA.initialize(process.env.REACT_APP_GA_CODE);
         |         ^
      15 | 
      16 | const trackPage = page => {
      17 |   ReactGA.set({ page });

      at node_modules/react-ga/dist/react-ga.js:926:7
      at _default (node_modules/react-ga/dist/react-ga.js:927:5)
      at Object.initialize (node_modules/react-ga/dist/react-ga.js:267:85)
      at Object.<anonymous> (src/App.js:14:9)
      at Object.<anonymous> (src/App.test.js:3:1)

Test Suites: 1 failed, 1 total
Tests:       0 total
Snapshots:   0 total
Time:        1.084s
Ran all test suites.

Change text-color-primary and bg-color

Hi, I am new to scss. I have been struggling for hours on how to change the background color and text color. Could you please show me where I can locate this colors?

Thank you.

Add a license

Could just be me but what's the license on this project? Could it be made explicit?

The package.json has private set to true but according to the package.json spec that's not a license.
"Consider also setting "private": true to prevent accidental publication."

Edit:
Just ran the project and the bottom of the page says "Made by Cruip. All right reserved" so I guess it's not public. It would still be nice if it was clearer.

Edit 2:
FWIW: The name open-react-template is quite misleading given it's not (that) open.

Anchor Links Not Working

Hello - it appears that anchor links to scroll down the page are do not work. Should anchor links be expected to work with the Smooth Scroll effect? At the moment anchors appear to not work at all.

cannot run the project

when I try to run the command npm Install I get the following error:

bsass_ldflags= --libsass_library= gyp info it worked if it ends with ok gyp verb cli [ gyp verb cli 'C:\\Program Files\\nodejs\\node.exe', gyp verb cli 'C:\\Users\\caval\\Documents\\GitRepos\\open-react-template\\node_modules\\node-gyp\\bin\\node-gyp.js', gyp verb cli 'rebuild', gyp verb cli '--verbose', gyp verb cli '--libsass_ext=', gyp verb cli '--libsass_cflags=', gyp verb cli '--libsass_ldflags=', gyp verb cli '--libsass_library=' gyp verb cli ] gyp info using [email protected] gyp info using [email protected] | win32 | x64 gyp verb command rebuild [] gyp verb command clean [] gyp verb clean removing "build" directory gyp verb command configure [] gyp verb check python checking for Python executable "python2" in the PATH gyp verb whichfailed Error: not found: python2 gyp verbwhichfailed at getNotFoundError (C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\which\which.js:13:12) gyp verbwhichfailed at F (C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\which\which.js:68:19) gyp verbwhichfailed at E (C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\which\which.js:80:29) gyp verbwhichfailed at C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\which\which.js:89:16 gyp verbwhichfailed at C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\isexe\index.js:42:5 gyp verbwhichfailed at C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\isexe\windows.js:36:5 gyp verbwhichfailed at FSReqCallback.oncomplete (fs.js:176:21) gyp verbwhichfailed python2 Error: not found: python2 gyp verbwhichfailed at getNotFoundError (C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\which\which.js:13:12) gyp verbwhichfailed at F (C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\which\which.js:68:19) gyp verbwhichfailed at E (C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\which\which.js:80:29) gyp verbwhichfailed at C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\which\which.js:89:16 gyp verbwhichfailed at C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\isexe\index.js:42:5 gyp verbwhichfailed at C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\isexe\windows.js:36:5 gyp verbwhichfailed at FSReqCallback.oncomplete (fs.js:176:21) { gyp verbwhichfailed code: 'ENOENT' gyp verbwhichfailed } gyp verb check python checking for Python executable "python" in the PATH gyp verbwhichsucceeded python C:\Users\caval\.windows-build-tools\python27\python.EXE gyp verb check python versionC:\Users\caval.windows-build-tools\python27\python.EXE -c "import sys; print "2.7.15
gyp verb check python version .%s.%s" % sys.version_info[:3];"returned: %j gyp verb get node dir no --target version specified, falling back to host node version: 14.8.0 gyp verb command install [ '14.8.0' ] gyp verb install input version string "14.8.0" gyp verb install installing version: 14.8.0 gyp verb install --ensure was passed, so won't reinstall if already installed gyp verb install version is already installed, need to check "installVersion" gyp verb got "installVersion" 9 gyp verb needs "installVersion" 9 gyp verb install version is good gyp verb get node dir target node version installed: 14.8.0 gyp verb build dir attempting to create "build" dir: C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\node-sass\build gyp verb build dir "build" dir needed to be created? C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\node-sass\build gyp verb find vs2017 Found installation at: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community gyp verb find vs2017 - Found Microsoft.VisualStudio.Component.Windows10SDK.18362 gyp verb find vs2017 - Found Microsoft.VisualStudio.Component.VC.Tools.x86.x64 gyp verb find vs2017 - Found Microsoft.VisualStudio.VC.MSBuild.Base gyp verb find vs2017 - Using this installation with Windows 10 SDK gyp verb find vs2017 using installation: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community gyp verb build/config.gypi creating config file gyp verb build/config.gypi writing out config file: C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\node-sass\build\config.gypi gyp verb config.gypi checking for gypi file: C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\node-sass\config.gypi gyp verb common.gypi checking for gypi file: C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\node-sass\common.gypi gyp verb gyp gyp format was not specified; forcing "msvs" gyp info spawn C:\Users\caval\.windows-build-tools\python27\python.EXE gyp info spawn args [ gyp info spawn args 'C:\\Users\\caval\\Documents\\GitRepos\\open-react-template\\node_modules\\node-gyp\\gyp\\gyp_main.py', gyp info spawn args 'binding.gyp', gyp info spawn args '-f', gyp info spawn args 'msvs', gyp info spawn args '-G', gyp info spawn args 'msvs_version=2015', gyp info spawn args '-I', gyp info spawn args 'C:\\Users\\caval\\Documents\\GitRepos\\open-react-template\\node_modules\\node-sass\\build\\config.gypi', gyp info spawn args '-I', gyp info spawn args 'C:\\Users\\caval\\Documents\\GitRepos\\open-react-template\\node_modules\\node-gyp\\addon.gypi', gyp info spawn args '-I', gyp info spawn args 'C:\\Users\\caval\\.node-gyp\\14.8.0\\include\\node\\common.gypi', gyp info spawn args '-Dlibrary=shared_library', gyp info spawn args '-Dvisibility=default', gyp info spawn args '-Dnode_root_dir=C:\\Users\\caval\\.node-gyp\\14.8.0', gyp info spawn args '-Dnode_gyp_dir=C:\\Users\\caval\\Documents\\GitRepos\\open-react-template\\node_modules\\node-gyp', gyp info spawn args '-Dnode_lib_file=C:\\Users\\caval\\.node-gyp\\14.8.0\\<(target_arch)\\node.lib', gyp info spawn args '-Dmodule_root_dir=C:\\Users\\caval\\Documents\\GitRepos\\open-react-template\\node_modules\\node-sass', gyp info spawn args '-Dnode_engine=v8', gyp info spawn args '--depth=.', gyp info spawn args '--no-parallel', gyp info spawn args '--generator-output', gyp info spawn args 'C:\\Users\\caval\\Documents\\GitRepos\\open-react-template\\node_modules\\node-sass\\build', gyp info spawn args '-Goutput_dir=.' gyp info spawn args ] gyp verb command build [] gyp verb build type Release gyp verb architecture x64 gyp verb node dev dir C:\Users\caval\.node-gyp\14.8.0 gyp verb found first Solution file build/binding.sln gyp verb using MSBuild: C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\15.0\Bin\MSBuild.exe gyp info spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\15.0\Bin\MSBuild.exe gyp info spawn args [ gyp info spawn args 'build/binding.sln', gyp info spawn args '/nologo', gyp info spawn args '/p:Configuration=Release;Platform=x64' gyp info spawn args ] gyp ERR! UNCAUGHT EXCEPTION gyp ERR! stack Error: spawn C:\Program Files (x86)\Microsoft Visual Studio\2019\Community\MSBuild\15.0\Bin\MSBuild.exe ENOENT gyp ERR! stack at Process.ChildProcess._handle.onexit (internal/child_process.js:268:19) gyp ERR! stack at onErrorNT (internal/child_process.js:468:16) gyp ERR! stack at processTicksAndRejections (internal/process/task_queues.js:80:21) gyp ERR! System Windows_NT 10.0.19041 gyp ERR! command "C:\\Program Files\\nodejs\\node.exe" "C:\\Users\\caval\\Documents\\GitRepos\\open-react-template\\node_modules\\node-gyp\\bin\\node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library=" gyp ERR! cwd C:\Users\caval\Documents\GitRepos\open-react-template\node_modules\node-sass gyp ERR! node -v v14.8.0 gyp ERR! node-gyp -v v3.8.0 gyp ERR! This is a bug innode-gyp`.
gyp ERR! Try to update node-gyp and file an Issue if it does not help:
gyp ERR! https://github.com/nodejs/node-gyp/issues
Build failed with error code: 7
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\webpack-dev-server\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted
{"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted
{"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\jest-haste-map\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted
{"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: node scripts/build.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\caval\AppData\Roaming\npm-cache_logs\2020-09-29T08_43_37_031Z-debug.log`

Module Parse Error

./components/ui/mobile-menu.tsx
Module parse failed: Bad character escape sequence (2:94)
| import { createProxy } from "next/dist/build/webpack/loaders/next-flight-loader/module-proxy"

const proxy = createProxy("......\open-react-template-master\components\ui\mobile-menu.tsx")

Blank After Install: Uncaught TypeError: ansiStyles.color is undefined

After installing this repo the app did not launch properly.

I did the following:
cloned the repo to my local PC
ran "npm install"
ran "npm start"

The command prompt indicates that the server starts and a web browser tab opens to localhost:3000.
However, the web page is blank.
The following error message is shown in the browser console:

Uncaught TypeError: ansiStyles.color is undefined
js index.js:72
js 0.chunk.js:22755
Webpack 13

still using node-saas?

Fails to install dependencies

I made a pastebin of the error npm returns when installing the dependencies https://pastebin.com/eeLDGLAB