About the Student Success Tool

Frameworks Used

the Student Success Tool is built on:

• Laravel Framework. Documentation

• Inertiajs. Documentation

• Reactjs. Documentation

• Tailwindcss. Documentation

DO NOT DO THIS! It has already been done.

For the record: How to set-up an env from scratch DO NOT DO THIS FOR fellows dev environment or local development as this has already been done

1. Create a Cloud Bucket to store the static files (the files we'll generate in the cloudbuild autodeploy flow)
2. Update the cors-config.json with allowed origin URLs
3. Run gcloud storage buckets update gs://<BUCKET_NAME> --cors-file=cors-config.json
4. Run gsutil cors get gs://<BUCKET_NAME> to check that the cors config applied to the bucket
5. Run gcloud storage buckets add-iam-policy-binding gs://<BUCKET_NAME> --member=allUsers --role=roles/storage.objectViewer to enable public internet access to the bucket

NOTE: DO NOT STORE SENSITIVE/SECRET INFO IN THIS BUCKET -- this bucket should be only used to store static vite generated files.

1. Static Asset Creation: handled automatically on push by Cloudbuild.yaml using npm install and npm build and cp to cloud bucket Cloud Build
2. Database migrations: Cloud Run Job
3. Auto-deploy: orchestrated by Cloud Build (currently stored inline) on Github push

Local Development Setup

You only have to do this once in your local development system.

1. brew install composer (Assuming you are on Mac, but install as you think best)
2. brew install npm (Assuming you are on Mac, but install as you think best)

Local Development

If you use npm run dev it'll allow for realtime updates in the local site as you make changes.

1. Clone this project
2. cd [project-name]
3. composer install
4. Copy .env.example file to .env in the root of the repo folder.
5. npm install (and potentially clear your cache: php artisan cache:clear, php artisan route:clear, php artisan view:clear, php artisan optimize:clear, composer dump-autoload )
6. php artisan key:generate
7. php artisan migrate
8. npm run dev

Alternatively, you can also use ./local_run.sh which will perform the above actions (with the exceptions of cd'ing into the directory or copying the .env file so you should still do that first).

NOTE: if you've made any db changes and want to reload the db you will have to remove the database/database.sqlite file before running ./local_run.sh.

And in a separate terminal run: php artisan serve

Optionally install the React Dev Tools: https://chromewebstore.google.com/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en

Use console.log() and fn+12 to open chrome dev panel.

Styling

Similar to Python's Black, you can use run ./vendor/bin/pint to autoformat your PHP.

Notes on files and locations of interest

• routes/web.php is the main entrypoint to define all routes and available functions.
• resources/js/Layouts/AppLayout.jsx contains the page layout and function renderNavLinks() modifies which links are available in the nav bar.
• resources/js/Pages/ contains all the separate page views (e.g. Welcome.jsx is the front page, Dashboard.jsx is what's shown when the Dashboard route is clicked etc.)

So for example, to add a new page, Foopage, which you'd like to be visible in the nav bar, you'd have to:

1. Add a Foopage route in web.php (include auth middleware if that page should require user login: Route::middleware('auth')->get('/foopage', function () { return Inertia::render('Foopage'); })->name('foopage');
2. In AppLayout.jsx add the Foopage item to route mapping in renderNavLinks(): const renderNavLinks = () => (['home', 'FAQ', 'data-dictionary', 'dashboard', 'foopage'].map((routeName)...
3. Add a Foopage.jsx file under resources/js/Pages/... subdirectory that contains the actual page rendering code.

Notes on deploying to dev

When deploying to dev, make sure to also check the outcome of the associated migration job in Cloud Run > Jobs.