BandungDev website platform is a 🚧 Work in Progress.
Check out:
The repo is based on Dogokit using Remix, React, Tailwind CSS, Radix UI, Prisma ORM, and more. For more details and documentation, check its repo.
Use pnpm to improve productivity and replace npm, so make sure pnpm is installed:
npm i -g pnpmTo run the app locally, make sure the project's local dependencies are installed:
pnpm installThis also run the postinstall script from package.json which by default run
prisma generate.
Note: Not using Bun yet as there are still some issues.
By default installing the modules is also running the postinstall script that
generate the Prisma Client (@prisma/client) for it to be used in the app.
If it isn't generated or need to generate manually, run:
pnpm db:gen
# prisma generateLog, format, lint to check if the setup is fine:
pnpm check
# check: env typecheck prettier eslint stylelint prismapnpm fix
# fix: prettier eslint stylelint prismaNote: Can ignore non-critical warning from ESLint and TypeScript
Prisma ORM is used to communicate with the database easily.
If prefer using Docker and Docker Compose for local development, follow this guide on database.
The app will be deployed primarily using PlanetScale, the migration files are not needed. Therefore, push the schema directly there. The migration process will be handled through the deploy requests. Although using an ORM, there's still also a way to run a raw query.
Also read:
Create the .env file from .env.example. This is the one for local
development, not production
cp -i .env.example .envConfigure the required environment variables if on local, otherwise in the project settings on other environments.
If necessary, create the .env.production for production access. Adjust
accordingly if need for staging, test, etc.
cp -i .env.example .env.productionRequired:
APP_URL: For example,http://localhost:3000DATABASE_URL: For example,mysql://user:password@localhost:3060/bandungdevSESSION_SECRET: For example,the_secret_text
For the database, either choose to use MySQL or PostgreSQL from local system, Docker container, services like PlanetScale (MySQL) or Neon (PostgreSQL).
If prefer using Docker and Docker Compose for local development, follow this guide.
To start quickly, create a PlanetScale account to
have a MySQL instance for development and production. After the database has
been created, "Get the connection string", select "Prisma", then copy the full
DATABASE_URL.
Keep in mind the free plan only allow for 1 database. So either later keep it, delete it when unused, or upgrade the plan. There's also a verification with a payment card, even though it's still free to start.
Generate a random string for the SESSION_SECRET using
openssl rand -base64 32 on the terminal or put any long random text.
DATABASE_URL="mysql://username:password@aws.connect.psdb.cloud/database-name?sslaccept=strict"
SESSION_SECRET="random_secret_text"Sync between Prisma schema and the database directly, by making schema changes
with prisma db push, which can be done regularly while updating the models:
pnpm db:push
# prisma db pushNote: Only need to push the schema in development. No need for migration files.
Even with local development without PlanetScale, pushing the schema directly is
still okay when in development or
prototyping the schema.
After a success push, then it will automatically run prisma generate.
Optionally, create users.json in prisma/credentials folder with the format
below. Can focus on certain users who want to be able to sign in in development,
so it doesn't have to be everyone.
[
{
"fullname": "User Name",
"username": "username",
"nickname": "User",
"email": "user@user.com",
"password": "useruser",
"roleSymbol": "ADMIN"
}
// ...
]Then seed the initial data when needed:
pnpm db:seed
# prisma db seedCheck if the build is fine. This als be used to build the app for production.
pnpm build
# remix buildThis will also run prisma generate too before the build.
Then try to run the app in production mode:
pnpm startIf familiar with deploying node applications, the built-in Remix app server is
production-ready. Make sure to deploy the output of remix build
build/public/build/
Finally, develop the app while running the development server:
pnpm dev
# remix dev --manualOpen http://localhost:3000 and it's ready!
Develop the app as usual, the Remix way.
- Image upload with Uploadcare
UPLOADCARE_PUBLIC_KEY,UPLOADCARE_SECRET_KEY
- SurabayaDev
©️ BandungDev