Installation
After downloading the file from Themeforest, You will find SuperProps.zip file. Then unzip the SuperProps.zip and run the following commands on SuperProps folder to get started with the project.
yarn
// For starting GatsbyJs Server run
yarn gatsby-dev
GatsbyJs server will start in localhost:8000
// For starting NextJs Server run
yarn next-dev
NextJs Server will start in localhost:3000
Available routes are below
/app
/appmodern
/appclassic
/appminimal
/saas
/saasmodern
/saasclassic
/saasminimal
/saasminimal2
/hosting
/hostingmodern
/portfolio
/ride
/crypto
/cryptomodern
/charity
/interior
/agency
/agencymodern
/agencydigital
...
Folder Structure
/packages
/landing [NextJs version of the project]
/landing-gatsby [Gatsby version of the project]
Stack We Have Used
- Lerna (A tool for managing JavaScript projects with multiple packages. https://lernajs.io)
- Yarn Workspace
- React Js and Next Js
- Gatsby Js
- Styled System and Styled Components
- Firebase Deployment.
- Vercel Deployment.
Development
Follow the below procedure to go with the development process.
GatsbyJs
If you want to develop only for gatsbyjs then you don't need the /landing
folder which contains only nextjs related code. You can delete /landing
folder.
For any specific template like the template under /app
route. If you want to use this template only, then you have to follow below procedure.
- Go to
/landing-gatsby/src/pages/
- now copy all the content from
app.js
- Paste all the content in
/landing-gatsby/src/pages/index.js
Now for cleaning the unused code in your project follow the below procedure.
- Now you can delete all other pages except
404.js
. That mean in your/pages
folder you will have two filesindex.js
and404.js
- From
/landing-gatsby/src/containers/
folder you can delete all other folder exceptApp
andError
- From
/common/assets/image/
folder you can delete all other folder exceptapp
. Do not delete any files from there like404.svg
,error.svg
etc. - From
/common/data/
folder you can delete all other folder exceptApp
. - From
/common/theme/
folder you can delete all other folder exceptapp
. Do not delete theindex.js
file.
Now if you start your gatsbyjs
server with yarn gatsby-dev
then you will get your server running on localhost:8000
NextJs
If you want to develop only for nextjs
then then you don't need the /landing-gatsby
folder. You can delete the folder.
For any specific template like the template under /app
route. If you want to use this template only, then you have to follow below procedure.
- Go to
/landing/pages/
- now copy all the content from
app.js
- Paste all the content in
/landing/pages/index.js
Now for cleaning the unused code in your project follow the below procedure.
- Now you can delete all other pages except
_app.js
,_documents.js
and_error.js
. That mean in your/pages
folder you will have four filesindex.js
,_app.js
,_documents.js
anderror.js
- From
/landing/containers/
folder you can delete all other folder exceptApp
andError
- From
/common/assets/image/
folder you can delete all other folder exceptapp
. Do not delete any files from there like404.svg
,error.svg
etc. - From
/common/data/
folder you can delete all other folder exceptApp
. - From
/common/theme/
folder you can delete all other folder exceptapp
. Do not delete theindex.js
file.
To start the server for nextjs
you have to run yarn nextjs-dev
and the server will start on locahost:3000
.
Explaining Containers
In the containers
directory you will get folder for our every template. If you want to use App template. Then in the App
directory you will get folders containing different section of the template like Banner
, Footer
, Testimonial
, Navbar
etc.
All of these containers contains regular reactjs code.
Deployment
For deploying your final project you have to build your project first. To build the project you have to follow below procedure.
GatsbyJs
Run the below command on
yarn gatsby-build
// To check the build version locally run below command
// Not necessary if you don't want to check on your local.
yarn gatsby-serve
If you run yarn gatsby-serve
then the build version the the project will start in localhost:9000
. Navigate to the url you will get your site up and running.
NextJs
To build the nextjs version run below commands.
yarn next-build
// To check the build version locally run below command
// Not necessary if you don't want to check on your local.
yarn next-start
If you want to host the static html version of your nextjs project then run the below command to build static version
yarn next-export
Running with Docker
To run the SuperProps Next.js app in docker
yarn next-export
docker build -t superprops/landing-next -f ./packages/landing/Dockerfile .
docker run -it -p 3000:3000 superprops/landing-next:latest
Open http://localhost:3000
To run the SuperProps Gatsby.js app in docker
yarn gatsby-build
docker build -t superprops/landing-gatsby -f ./packages/landing-gatsby/Dockerfile .
docker run -it -p 8000:8000 superprops/landing-gatsby:latest
open http://localhost:8000
Deployment Support
vercel.com
GatsbyJs
We have given vercel.com deployment by default. For hosting the project in vercel.com first you have to go within the packages/landing-gatsby
Now run below command .
vercel
NextJs
For deploying nextjs on vercel.com go to packages/landing
. Now run below command .
vercel
Make sure you have
vercel-cli
installed in your system.
Firebase
NextJs
Add your project ID at packages/landing/.firebaserc
Then, To deploy to your site, run the following command from the packages/landing
directory.
yarn deploy
GatsbyJs
To deploy to your site, run the following command from the packages/landing-gatsby
directory.
yarn deploy
Make sure you have
firebase-tools
installed on your machine.
Netlify
At first, open an account on netlify and go to sites
tab.
NextJs
Run the below command to make the project netlify deploy ready from packages/landing
.
yarn export
After running the above command go to /landing
folder. You will find a out
folder there. Drag
and drop this out
folder on netlify sites
tab. Now after finishing the upload you are ready to go.
GatsbyJs
If you want to host the gatsbyjs
project, go to your command line and run this command on packages/landing-gatsby
directory.
yarn build
After running above command go to landing-gatsby
folder. You will find a public
folder
there. Drag and drop this public
folder on netlify sites
tab.