1. Introduction

2. Run the project locally

3. Available Scripts

4. Deployment

   • Deployment – Run locally
   • Deployment – Live website

5. Credits

   • Media

Creating a responsive landing page that matches my Figma design using HTML, Tailwind CSS and JavaScript

This project was created with Vite

Back to top

• Runs the app in the development mode.
  Open http://localhost:5173/ to view it in the browser.

  cd landing-page
  npm i
  npm run dev
  

Back to top

In the project directory, you can run:

Runs the app in the development mode.
Open http://localhost:5173/ to view it in your browser.

The page will reload when you make changes.
You may also see any lint errors in the console.

You may run npm run build command to build the app.

$ npm run build

By default, the build output will be placed at dist. You may deploy this dist folder to any of your preferred platforms.

Once you've built the app, you may test it locally by running npm run preview command.

$ npm run preview

The vite preview command will boot up a local static web server that serves the files from dist at http://localhost:4173. It's an easy way to check if the production build looks OK in your local environment.

You may configure the port of the server by passing the --port flag as an argument.

package.json

{
  "scripts": {
    "preview": "vite preview --port 8080"
  }
}

Now the preview command will launch the server at http://localhost:8080.

Once you've built and tested the app, you may deploy it by running npm run deploy command

$ npm run deploy

Back to top

1. Prerequisite:

   • Make sure Node and NPM are installed on your computer. You can download both at nodejs.org (NPM is included in your Node installation).
   • Please see .nvmrc file at the root of landing-page repo.
   • Using nvm, a Node Version Manager is recommended as it helps you manage and switch between different Node versions with ease. It provides a command-line interface where you can install different versions with a single command, set a default, switch between them, etc. Here is NVM for Windows

2. In GitHub click on the repository nammed landing-page

3. Clone the repository locally. Run

   git clone https://github.com/sctlcd/landing-page.git
   

4. Install all modules listed as dependencies in package.json

   cd landing-page
   npm i
   

5. Runs the app in the development mode. Open http://localhost:5173/ to view it in the browser.

   cd landing-page
   npm run dev
   

Back to top

landing-page live website is currently deployed on Vercel using the main branch on GitHub. Once you have the project setup locally, you can proceed to deploy it remotely.

1. Create a Vercel account and/or log in to your Vercel account

2. Install Vercel package in the project:

   npm i vercel
   

3. Add a deploy script in the package.json file

   {
     "scripts": {
       // ...
       "deploy": "vercel --prod"
     },
   }
   

4. To login run:

   npx vercel login
   

5. In the terminal run:

   npm run deploy
   

6. Follow the instructions

   $ npm run deploy
   
   PS D:\source_code\landing-page> npm run deploy
     > landing-page@0.0.0 deploy
     > vercel --prod
   
     Vercel CLI 44.7.3
     ? Set up and deploy “D:\source_code\landing-page”? yes
     ? Which scope should contain your project? sctlcd's projects
     ? Link to existing project? no
     ? What’s your project’s name? landing-page
     ? In which directory is your code located? ./
     Local settings detected in vercel.json:
     Auto-detected Project Settings (Vite):
     - Build Command: vite build
     - Development Command: vite --port $PORT
     - Install Command: `yarn install`, `pnpm install`, `npm install`, or `bun install`
     ? Want to modify these settings? no
     ? Want to use the default Deployment Protection settings? (Vercel Authentication: Standard      
     🔗  Linked to sctlcds-projects/landing-page (created .vercel and added it to .gitignore)        
     🔍  Inspect: https://vercel.com/sctlcds-projects/landing-page/9rnPbHAAtyGR8L3rWWsv7ZTxmJbW [3s] 
     ✅  Production: https://landing-page-pexhu8w0o-sctlcds-projects.vercel.app [3s]
   

   => live link: https://landing-page-mu-five-80.vercel.app/

Back to top

• favicon.ico - Flaticon | copyright freepik
• Available On The App Store Apple Button -min-modified-min - CityPNG | copyright unknown
• Get It On Google Play Button Transparent -min-modified-min - CityPNG | copyright unknown

Back to top