Skip to content

Latest commit

 

History

History
81 lines (53 loc) · 4.95 KB

README.md

File metadata and controls

81 lines (53 loc) · 4.95 KB
Raw

nextjs-netlify

Free Netlify quickstart recipe libary app using Next.js, Prisma and Aiven. Recipe data is from kaggle.

About the app

The application is a recipe library where you can browse and inspect recipes. Additionally, you can like recipes that seem interesting and filter list to show only liked ones. Furthermore, you can see interesting statistics from all of the recipes and those that are liked.

PostgreSQL® is used as the data storage for storing all recipes and whether they are liked or not. Aiven for Caching is optional, but when configured statistics are cached to offer faster response time. The database response times are shown in the app to demonstrate the difference. You can get free services with Aiven for PostgreSQL and Aiven for Caching by signing up.

The application is designed to be hosted on serverless application platform Netlify, which has amazing support for hosting Next.js applications.

Getting started

The app requires a PostgreSQL database. Configuring Aiven for Caching is optional, but highly recommended to demonstrate all features of the application and the benefits of having Caching as part of your application. Using us-east-1 region is recommended to minimise latency, as this region will be closest to where the Netlify functions are deployed if using their free plan.

Get free Aiven for PostgreSQL and Aiven for Caching from Aiven.

Fork and deploy to Netlify

You can fork this branch and deploy the application immediately to Netlify by clicking the button below. Database migration and seed is done during the Netlify deployment process. Make sure you have your PostgreSQL database up and running when deploying to achieve a working environment on the first try.

Deploy to Netlify

Development setup

  • Install Node version 18
  • Copy .env.template as .env and set DATABASE_URL and REDIS_URI
  • Install the packages: npm ci
  • Setup the database by running: npm run reset-db
  • Start the development server: npm run dev
  • Go to http://localhost:3000 and head to browse the recipes

Congratulations you can now start developing. The page reloads automatically as you make changes.

Useful commands for development

  • Reset the database: npm run reset-db
  • Run the development server: npm run dev
  • Run eslint: npm run eslint
  • Run prettier format: npm run format

Netlify deployment

You can fork this branch and deploy the application immediately to Netlify by clicking the button below. Database migrations and seed is done during the Netlify deployment process. Make sure you have PostgreSQL database up and running when deploying to achieve a working environment on the first try.

Deploy to Netlify

Setup automatic deployment manually

  1. Install packages: npm ci

  2. Login with the cli to obtain token: npx netlify login

  3. Start and follow the automated setup process: npx netlify init

    Choose to create a new site, and then select the default options other prompts. You will be required to authorize Netlify with GitHub.

  4. Open site admin UI in Netlify: npx netlify open --admin

  5. Go to site configuration section and add environment variables for PostgreSQL and Aiven for Caching. Check .env.template for the keys.

  6. Go to deploys section and trigger the deployment by clicking Trigger deploy -button.

  7. Access the app from command line with npx netlify open --site or open the site from the Netlify admin UI.

You can now push changes and your changes will be automatically deployed to your site.

Licenses

nextjs-netlify is licensed under the Apache license, version 2.0. Full license text is available in the LICENSE file. Please note that the project explicitly does not require a CLA (Contributor License Agreement) from its contributors.

PostgreSQL is a trademark or registered trademark of the PostgreSQL Community Association of Canada, and used with their permission. *Redis is a registered trademark of Redis Ltd. Any rights therein are reserved to Redis Ltd. Any use by Aiven is for referential purposes only and does not indicate any sponsorship, endorsement or affiliation between Redis and Aiven. All product and service names used in this website are for identification purposes only and do not imply endorsement.

Contact

Bug reports and patches are very welcome, please post them as GitHub issues and pull requests at https://github.com/Aiven-Labs/nextjs-netlify.