{"id":19967393,"url":"https://github.com/teamstarter/gsg-boilerplate-typescript","last_synced_at":"2025-05-04T00:31:47.819Z","repository":{"id":97138954,"uuid":"305362769","full_name":"teamstarter/gsg-boilerplate-typescript","owner":"teamstarter","description":"A boilerplate to quickly get starter with graphql-sequelize-generator on a Typescript project.","archived":false,"fork":false,"pushed_at":"2024-08-05T17:18:09.000Z","size":176,"stargazers_count":3,"open_issues_count":3,"forks_count":7,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-07T23:51:07.436Z","etag":null,"topics":["graphql","graphql-sequelize-generator","gsg-boilerplate-typescript","sequelize","typescript"],"latest_commit_sha":null,"homepage":"https://teamstarter.github.io/gsg-documentation/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/teamstarter.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-10-19T11:34:28.000Z","updated_at":"2024-10-24T15:06:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"15a49774-f3ee-46a0-8159-55d616ee1494","html_url":"https://github.com/teamstarter/gsg-boilerplate-typescript","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamstarter%2Fgsg-boilerplate-typescript","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamstarter%2Fgsg-boilerplate-typescript/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamstarter%2Fgsg-boilerplate-typescript/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/teamstarter%2Fgsg-boilerplate-typescript/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/teamstarter","download_url":"https://codeload.github.com/teamstarter/gsg-boilerplate-typescript/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252272944,"owners_count":21721831,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","graphql-sequelize-generator","gsg-boilerplate-typescript","sequelize","typescript"],"created_at":"2024-11-13T02:41:26.935Z","updated_at":"2025-05-04T00:31:47.804Z","avatar_url":"https://github.com/teamstarter.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gsg-boilerplate-typescript\n\nThis project is a boilerplate to quickly get started with graphql-sequelize-generator on a Typescript project.\n\nIt's a simple To Do list app based on [this codepen](https://codepen.io/karlomajer/pen/rvyyvV) that allows you to manage tasks (create, update, delete, count).\n\n## Getting Started\n\nFirst you need to clone the project.\n\n```\n$ git clone git@github.com:teamstarter/gsg-boilerplate-typescript.git\n```\n\nThis project uses the 12.18.1 version of Node. You can switch to the right version using nvm. Install nvm if you don't have it\n\n```\n$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.36.0/install.sh | bash\n```\n\nThen choose the rigth version\n\n```\n$ nvm use\n```\n\nThen install all the dependencies of the project\n\n```\n$ yarn\n```\n\nThen you need to initialize the database before starting the project. It is configured by default with an sqlite database as described in ./config/config.json. The following command will create or replace the ./data/database.sqlite and run the migrations and the seeds.\n\nYou can use any [Sequelize](https://sequelize.org/master/manual/getting-started.html)-compatible database (Postgresql, MySQL, etc...), but the project will work with the default one without any problem.\n\n```\n$ yarn db-reset\n```\n\nOnce the database is initialized, you can run the project\n\n```\n$ yarn dev\n```\n\nYou can then test the app at this address: [http://locahost:3000](http://locahost:3000) and the GraphQL dashboard at this URL: [http://localhost:8080/graphql](http://localhost:8080/graphql).\n\n## The Server\n\nIt's a node server written in Typescript. It generates a GraphQL schema based on a few declarations of queries, mutations and subscriptions.\n\n```typescript\ngraphqlSchemaDeclaration.task = {\n  model: models.task,\n  actions: ['list', 'create', 'update', 'delete', 'count'],\n  subscriptions: ['create', 'update', 'delete']\n}\n```\n\nGSG requires a task model (in the models folder), to work with the above configuration.\n\n```typescript\nexport default function Task(sequelize: any) {\n  var Task = sequelize.define(\n    'task',\n    {\n      id: {\n        type: DataTypes.INTEGER,\n        primaryKey: true,\n        autoIncrement: true\n      },\n      name: {\n        type: DataTypes.STRING,\n        allowNull: false\n      },\n      active: {\n        type: DataTypes.BOOLEAN,\n        allowNull: false\n      }\n    },\n    {\n      sequelize,\n      freezeTableName: true,\n      modelName: 'task',\n      paranoid: true,\n      timestamps: true\n    }\n  )\n\n  return Task\n}\n```\n\nThe server generates an endpoint (/graphql) to execute get/post queries from the app.\n\n## The App\n\nThis boilerplace uses React. It was initialized using create-react-app in Typescript.\n\nThe app uses apollo (the @apollo/client package) which allows you\nto quickly send queries to the server to get or send data. In the following example, the query gets a list of tasks.\n\n```typescript\nconst GET_TASKS = gql`\n  query GetTasks($order: String, $where: SequelizeJSON) {\n    task(order: $order, where: $where) {\n      id\n      name\n      active\n    }\n  }\n```\n\n## How to add a field?\n\nLook at the \"migrations\" folder, duplicate the last migration, change the timestamp and add your field(s).\nAdd the field in the models/task.ts file.\nAnd run **yarn db-migrate**, and that's it! The field will be available on the GraphQL object after pm2 reloads the server.\n\n## Available Commands\n\nIn the project directory, you can run:\n\n### `yarn dev`\n\nRuns the app in the development mode.\u003cbr /\u003e\nOpen [http://localhost:3000](http://localhost:3000) to view it in the browser while reloading if you make edits.\n\nA dashboard is also available to test your GraphQL schema at this URL: [http://localhost:8080/graphql](http://localhost:8080/graphql).\n\nThe `yarn dev` command runs the app and the server with pm2.\n\n### `yarn db-reset`\n\nCreates a sqlite database file in the data folder and runs the migrations and seeds. If the database file already exists the file is replaced by a new one. This command is useful to clean the database and get a default one.\n\n### `yarn db-migrate`\n\nRun the migration in the \"migrations\" folder if they have not yet been successfully migrated.\nFor more information on how the sequelize migrations works, check [here](https://sequelize.org/docs/v6/other-topics/migrations/).\n\n### `./node_modules/.bin/pm2 log`\n\nUse this command to print logs in the terminal. It's useful to have some realtime logs when you need to debug your app.\n\n### `./node_modules/.bin/pm2 delete all`\n\nThis command will stop your app.\n\n## Learn More\n\nYou can learn more about graphql-sequelize-generator [here](https://teamstarter.github.io/gsg-documentation/).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\nTo learn Typescript, check out the [Typescript documentation](https://www.typescriptlang.org/)\n\nTo learn Graphql, check out the [GraphQL documentation](https://graphql.org/)\n\nYou can learn more about pm2 [here](https://pm2.keymetrics.io/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamstarter%2Fgsg-boilerplate-typescript","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fteamstarter%2Fgsg-boilerplate-typescript","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fteamstarter%2Fgsg-boilerplate-typescript/lists"}