{"id":47972089,"url":"https://github.com/clu-ling/odin-tutorial","last_synced_at":"2026-04-04T10:46:23.850Z","repository":{"id":41719321,"uuid":"239210015","full_name":"clu-ling/odin-tutorial","owner":"clu-ling","description":"Interactive Odin tutorial","archived":false,"fork":false,"pushed_at":"2024-01-20T22:09:56.000Z","size":1010,"stargazers_count":3,"open_issues_count":20,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-01-21T22:50:17.081Z","etag":null,"topics":["demo","information-extraction","nlp-resources","rule-based-nlp","tutorial"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/clu-ling.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}},"created_at":"2020-02-08T21:57:26.000Z","updated_at":"2024-01-21T22:50:17.082Z","dependencies_parsed_at":"2023-01-27T09:31:03.064Z","dependency_job_id":null,"html_url":"https://github.com/clu-ling/odin-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/clu-ling/odin-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clu-ling%2Fodin-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clu-ling%2Fodin-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clu-ling%2Fodin-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clu-ling%2Fodin-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/clu-ling","download_url":"https://codeload.github.com/clu-ling/odin-tutorial/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/clu-ling%2Fodin-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31397055,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["demo","information-extraction","nlp-resources","rule-based-nlp","tutorial"],"created_at":"2026-04-04T10:46:23.771Z","updated_at":"2026-04-04T10:46:23.835Z","avatar_url":"https://github.com/clu-ling.png","language":"JavaScript","readme":"# odin-tutorial\n\nAn interactive tutorial for learning to write Odin rules [React](https://reactjs.org/) and [Node.js](https://nodejs.org/en/) with [Express](https://expressjs.com/) (to proxy requests to the Odin REST API).  \n\nThe setup (including this README) is based on the project structure from [Sandeep Raveesh's](https://github.com/crsandeep) [template](https://github.com/crsandeep/simple-react-full-stack).\n\n\n# Launching the Odin tutorial\n\n\n## Dependencies\n1. [`docker`](https://docs.docker.com/install/)\n2. [`docker-compose`](https://docs.docker.com/compose/)\n\n\nIt's recommended that you have at least 3GB of RAM available (the REST API also runs an NLP pipeline before things are handed off to Odin).\n\n```bash\ndocker-compose up\n```\n\nTo view the interactive tutorial, open your browser to [localhost:8880].\nTo interact with the Odin ReST API, open your browser to [localhost:8881/api].\n\n# Development\n\n## Dependencies\n1. [`Node.js`](https://nodejs.org/en/)\n2. [`yarn`](https://yarnpkg.com/)\n \n### Installing the dependencies\n```bash\nyarn install\n```\n### Development mode\n\nIn development mode, 2 servers will run. The frontend code will be served by the [webpack dev server](https://webpack.js.org/configuration/dev-server/) which helps with hot and live reloading. The server side Express code will be served by a node server using [nodemon](https://nodemon.io/) which helps in automatically restarting the server whenever server side code changes.\n\n```bash\n# start the dual servers with hot reloading of any modifications to the source\nyarn run dev\n```\n\n### Production mode\n\nIn production mode, a single server will run. All the client side code will be bundled into static files using webpack and it will be served by the Node.js/Express application.\n\nYou can run the app in production mode with the following commands:\n\n```bash\n# Minify everything\nyarn run build\n# Start the production server\nyarn start\n```\n\n## Documentation\n\n### Project structure\n\nAside from the config (see `config.js`), the source is found inside **src** directory. Inside **src**, the code is divided between the **client** and **server** directories. All the frontend code (react, css, js and any other assets) will be in client directory. Backend Node.js/Express code will be in the server directory.\n\n### `Babel`\n\n[Babel](https://babeljs.io/) allows us to write code in the latest version of JavaScript, while maintaining compatibility with older browsers via transpilation.\n\n[.babelrc file](https://babeljs.io/docs/usage/babelrc/) is used describe the configurations required for Babel.\n\nBabel requires plugins for handling various transpilation tasks. Presets are the set of plugins defined by Babel. The **env** preset is compatible with `babel-preset-es2015`, `babel-preset-es2016`, and `babel-preset-es2017` and will transpile them all to ES5. The **react** preset allows translates JSX into Javascript.\n\n### `ESLint`\n\n[ESLint](https://eslint.org/) is a pluggable and configurable linter for JavaScript.\n\n[.eslintrc.json](\u003c(https://eslint.org/docs/user-guide/configuring)\u003e) describes the configurations required for ESLint.\n\nCurrently, this project uses [Airbnb's popular Javascript style guide](https://github.com/airbnb/javascript) as a basis (see below for some modifications). Since this project involves both client (browser) and server side (Node.js) code, the **env** is set to browser and node. Note that the following have been turned off:\n- [**no-console**](https://eslint.org/docs/rules/no-console)\n- [**comma-dangle**](https://eslint.org/docs/rules/comma-dangle)\n- [**react/jsx-filename-extension**](https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-filename-extension.md)\n\n### `Webpack`\n\n[Webpack](https://webpack.js.org/) is a module bundler. Its main purpose is to bundle JavaScript files for usage in a browser.\n\n[webpack.config.js](https://webpack.js.org/configuration/) file is used to describe the configurations required for webpack.\n\n  1.  **entry:** Denotes where the application starts executing and webpack starts bundling.\n    Note: babel-polyfill is added to support async/await. Read more [here](https://babeljs.io/docs/en/babel-polyfill#usage-in-node-browserify-webpack).\n2.  **output path and filename:** The target directory and the filename for the bundled output.\n3.  **module loaders:** Module loaders are transformations that are applied on the source code of a module. We pass all the js file through [babel-loader](https://github.com/babel/babel-loader) to transform JSX to Javascript. CSS files are passed through [css-loaders](https://github.com/webpack-contrib/css-loader) and [style-loaders](https://github.com/webpack-contrib/style-loader) to load and bundle CSS files. Fonts and images are loaded through url-loader.\n4.  **Dev Server:** Configurations for the webpack-dev-server which will be described in coming section.\n5.  **plugins:** [clean-webpack-plugin](https://github.com/johnagan/clean-webpack-plugin) is a webpack plugin to remove the build folder(s) before building. [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) simplifies creation of HTML files to serve your webpack bundles. It loads the template (public/index.html) and injects the output bundle.\n\n### Webpack dev server\n\n[Webpack dev server](https://webpack.js.org/configuration/dev-server/) is used along with webpack. It provides a development server that with support for live reloading of the client side code. This should be used for development only.\n\nThe `devServer` section of `webpack.config.js` contains the configuration required to run the webpack-dev-server.\n\n- [**Port**](https://webpack.js.org/configuration/dev-server/#devserver-port): specifies the Webpack dev server to listen on this particular port (3000 in this case).  - [**open**](https://webpack.js.org/configuration/dev-server/#devserver-open): when set to true, it will automatically open the home page on startup. [Proxying](https://webpack.js.org/configuration/dev-server/#devserver-proxy) URLs can be useful when we have a separate API backend development server and we want to send API requests on the same domain. In our case, we have a Node.js/Express backend which handles API requests to the Odinson REST API (layers upon layers!).\n\n### `Nodemon`\n\nNodemon is a utility that monitors for any changes in the server source code automatically restarts the server updon detection. This is used in development only.\n\nThe `nodemon.json` file is describes the configurations for Nodemon. Here we instruct nodemon to watch the files in the directory `src/server` where all of our server side code resides. Nodemon will restart the node server whenever a file under `src/server` directory is modified.\n\n### `Express`\n\nExpress is a web application framework for Node.js. It is used to build our backend APIs.\n\n`src/server/index.js` is the entry point to the server application.  Aside from proxying API calls to the ODINSON REST API, the server is also configured to serve static assets from the **dist** directory.\n\n### `Concurrently`\n\n[Concurrently](https://github.com/kimmobrunfeldt/concurrently) is used to run multiple commands concurrently. We're using it to run the webpack dev server and the backend node server concurrently in the development environment.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclu-ling%2Fodin-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fclu-ling%2Fodin-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fclu-ling%2Fodin-tutorial/lists"}