Scribd
Upload
19 views4 pages

Documentation

Cette documentation fournit une vue d'ensemble complète de la création et de la personnalisation d'une landing page utilisant React. Vous y trouverez des instructions détaillées sur l'installation, la structure du projet, et les composants principaux, ainsi que des conseils pour optimiser et déployer votre landing page.

Uploaded by

kevin kenfack
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
19 views4 pages

Documentation

Cette documentation fournit une vue d'ensemble complète de la création et de la personnalisation d'une landing page utilisant React. Vous y trouverez des instructions détaillées sur l'installation, la structure du projet, et les composants principaux, ainsi que des conseils pour optimiser et déployer votre landing page.

Uploaded by

kevin kenfack
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

README.

md 2/27/2023

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 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
/saascreative
/fooddelivery
/saasappdark
/appcreative2
/webapp
/webappminimal
/webappcreative
/agencyformal
/agencyclassic
/appBlack

1/4
README.md 2/27/2023

...

Folder Structure
/packages
/landing [NextJs 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
. Styled System and Styled Components
. Firebase Deployment.
. Vercel Deployment.
Development
Follow the below procedure to go with the development process.
NextJs
Suppose, we want to use the app template. 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 files index.js, _app.js, _documents.js and
error.js
. From /landing/containers/ folder you can delete all other folder except App and Error
. From /common/assets/image/ folder you can delete all other folder except app. Do not delete
any files from there like 404.svg, error.svg etc.
. From /common/data/ folder you can delete all other folder except App.
. From /common/theme/ folder you can delete all other folder except app. Do not delete the
index.js file.

To start the server for nextjs you have to run yarn nextjs-dev and the server will start on
locahost:3000.
2/4
README.md 2/27/2023

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 sections 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.
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

We removed the next-export support from our template and we recommend to use next-build and
next-start to run our template.

But if you want to use ‘next-exportʼ, then at first please go to packages->landing->next.config.js and
replace the code with
const nextConfig = { images: { domains: ['pbs.twimg.com'], loader: 'akamai', path: '', }, };
Then , run next build && next export in your terminal.
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

Deployment Support
3/4
README.md 2/27/2023

vercel.com
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

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 next build && next 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.

4/4

You might also like