Skip to content

This is a template to create front-end app with Next.js and Chakra UI

Notifications You must be signed in to change notification settings

LastMileNow/next-chakra-template

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

39 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

This is a Next.js project bootstrapped with create-next-app. Next.js is an open-source web development framework created by Vercel enabling React-based web applications with server-side rendering and generating static websites. We also use Chakra UI, which is a simple, modular and accessible component library that gives us the building blocks to build React applications.

Getting Started

  • Clone this repo.
  • Copy all top level files and /api /pages /styles /util and /public folders to your new, empty project.
  • Remove unnecessary files and folders under /pages.
  • npm install to install dependencies.
  • npm run dev to start the development server. You can access the app at http://localhost:3000.
  • npm run build to build the app for production. This is to make sure that the build is successful.
  • Check in and push the code to your repo, to be activated by Vercel.
  • Set NEXT_PUBLIC_GMAP_API to your Google Map API key if you need. (start with NEXT_PUBLIC_ to expose to browser) to use
  • Go to https://vercel.com/dashboard and create a new project. (make sure your github account is connected to vercel)
  • When developing locally, you can run python echo.py under \api to start the development backend server. This will start a local backend server on port 80. You can test the backend at http://localhost, or from backend.js.

Learn More

Follow the instructions below to get started with the project.

More Resources

Python backend

Implement the following steps to create a python backend (sample code in api/date.py).

  • put the python code in the /api folder (not the same as the pages/api folder used by Next.js)
  • create a requirements.txt file under root directory to install the dependencies
  • defines a singular HTTP handler variable, inheritting from the BaseHTTPRequestHandler class
  • dic = dict(parse.parse_qsl(parse.urlsplit(self.path).query)) # parse the query string
  • self.wfile.write(json.dumps(ret_obj).encode()) # ret_obj is an object or self.wfile.write(message.encode()) # message is a string
  • Although not required by Vercel, create a main() function to start the server so that it can be run locally for debugging purposes

References:

Original 'Getting Started' Starts Here

First, run the development server:

npm run dev
# or
yarn dev

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

You can start editing the page by modifying pages/index.js. 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.js.

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

Learn More

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

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.

Notes:

  • Make sure there is no package-lock.json file in your project. If there is, delete it.

About

This is a template to create front-end app with Next.js and Chakra UI

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published