Welcome to the oldercoders.net codebase, and thank you for stopping by!
Older Coders aims to be a community for developers who have been at it a while, but are starting to feel the pressures and implicit biases of being the aging veteran amongst their younger peers. It will be where older coders go to connect, commiserate, organize, and find work with companies who value their maturity and experience.
We run on a Rails backend with mostly vanilla JavaScript on the frontend, some of it taking advantage of Stimulus.
This project follows uses Rubocop's default Rails configuration with a few modifications as the Ruby code analyzer. If you have Rubocop installed with your text editor of choice, you should be up and running.
For Javascript, we follow Airbnb's JS Style Guide, using ESLint and prettier. If you have ESLint installed with your text editor of choice, you should be up and running.
For CSS, we are using straight CSS, leveraging many of the newer features in the CSS spec such as variables, custom media queries, and color functions. PostCSS is configured to compile these newer features to CSS that most browsers will understand, and also adds some syntactic sugar like nesting selectors and ancestors which will be familiar to those of who are familiar with writing SCSS.
When commits are made, a git precommit hook runs via lint-staged. ESLint and prettier will run on your JavaScript code before it's committed. If there are linting errors that can't be automatically fixed, the commit will not happen. You will need to fix the issue manually then attempt to commit again.
This section provides a high-level requirement & quick start guide.
- Ruby: we recommend using rbenv to install the Ruby version listed on the badge.
- Yarn: please refer to their installation guide.
- PostgreSQL 9.4 or higher.
- A process file manager, such as Foreman, Hivemind, or Overmind. We prefer Overmind, as it allows for easier debugging.
-
Make sure all the prerequisites are installed.
-
Fork the Older Coders repository, at. https://github.com/OlderCoders/oldercoders/fork
-
Clone your forked repository, ie.
git clone https://github.com/<your-username>/oldercoders.git -
Set up your environment variables/secrets
- Take a look at
.env-sample. This file lists all theENVvariables we use in the application. - Make a copy of
.env-sampleand call it.env. This file will be ignored in Git. - Utilize your own credentials for any API keys listed in that file.
- Take a look at
-
Set up your development and test databases
-
Run
bin/setup -
That's it! Run
bin/startupto start the application and head tohttp://localhost:5000/
By default the application is configured to connect to a local database named older_coders_development and older_coders_test for running tests. If you need to specify a username and a password you can go about it by using the environment variable DATABASE_URL with a connection string.
The official Rails guides go into depth on how Rails merges the existing database.yml with the connection string.
Open your .env file and add the following:
DATABASE_URL: postgresql://USERNAME:PASSWORD@localhost
Replace USERNAME with your database username, PASSWORD with your database password.
You can find more details on connection strings in PostgreSQL's own documentation.
NOTE: due to how Rails merges database.yml and DATABASE_URL it's recommended not to add the database name in the connection string. This will default to your development database name also during tests, which will effectively empty the development DB each time tests are run.
We use Spring and it is already included in the project.
- Use the provided bin stubs to automatically start Spring, i.e.
bin/rails server,bin/rails db:migrate. - If Spring isn't picking up on new changes, use
spring stop. For example, Spring should always be restarted if there's a change in environment key. - Check Spring's status whenever with
spring status.
Older Coders takes something of an atypical approach for building out the front end. Most front-end code - JavaScript, CSS, and ERB Component templates all exist within the frontend directory. This means that you will not find an app/assets directory. Also, while you'll find .erb files in app/views for viewable routes, you'll see that they by in large reference components which live in the frontend/components directory.
Most of the views are broken into components, each of which includes an ERB file, a JavaScript file, and a CSS file.
There's a generator for stubbing out new components. It will create the constituent component files in the directory you specify (creating the directory tree if it doesn't exist). For instance:
$ bundle exec rails generate component global/header
will create a global/header component as follows:
Running via Spring preloader in process 37709
create frontend/components/global/header/_header.html.erb
create frontend/components/global/header/header.css
create frontend/components/global/header/index.js
In order for the component specific CSS and JavaScript to be picked up by Webpack, you'll need to make sure that you import the component. This can be done in either frontend/components/index.js or the component's parent directory index.js file (e.g. frontend/components/global/index.js).
You can delete a component as easily as you can generate it:
$ bundle exec rails destroy component global/header
Assets that aren't specific to a component can be found in various directories under frontend.
frontend/configcontains CSS configuration filesfrontend/stylescontains global CSSfrontend/scriptscontains global JavaScriptfrontend/packscontains Webpack entry files (e.g. Webpack compilesapplication.jstoapplication-[hash].jsandapplication-[hash].css)frontend/controllerscontains Stimulus.js controllersfrontend/assetscontains static assets, such as fonts and images.