Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/JaneMoroz/astro-ssr
A simple PWA build with Astro SSR and Strapi CMS.
https://github.com/JaneMoroz/astro-ssr
astro auth authentication metronic8 netlify pwa ssr strapi-cms
Last synced: about 2 months ago
JSON representation
A simple PWA build with Astro SSR and Strapi CMS.
- Host: GitHub
- URL: https://github.com/JaneMoroz/astro-ssr
- Owner: JaneMoroz
- License: mit
- Created: 2022-11-01T08:37:30.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-10T17:42:16.000Z (about 2 years ago)
- Last Synced: 2024-08-02T15:33:26.115Z (5 months ago)
- Topics: astro, auth, authentication, metronic8, netlify, pwa, ssr, strapi-cms
- Language: JavaScript
- Homepage: https://astro-ssr-test.netlify.app
- Size: 6.73 MB
- Stars: 26
- Watchers: 1
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Astro SSR Test App
A simple PWA app build with Astro SSR and Strapi CMS.
## 😀 User Can:
- [x] View the optimal layout for the site depending on their device's screen size
- [x] See hover states for all interactive elements on the page
- [x] Sign in / Sign out / Sign up
- [x] Add / Edit / Delete product
- [x] Add items to the cart
- [x] View the cart and remove items from it
- [x] See some cached images offline
## ❗️ Importan:
Deployed app can be seen [here](https://astro-ssr-test.netlify.app). It's server side is on `HEROKU` ('free tier' ), because of that
- [x] Server goes to sleep
- [x] If you are trying to load `/product` page, it might fail the first time (server is waking up), just reload
- [x] Authenticated users can upload images and see them, but after server goes to sleep, it erases them
## 🚀 Project Structure
Inside of the project, you'll see the following folders and files:
```
/
backend/
└──├── (strapi)
frontend/
└──├── public/
│ └── assets
│ └── icons
│ └── app.js
│ └── manifest.jso
│ └── service-worker.js
│ └── ...
├── src/
│ ├── components/
│ │ └── auth
│ │ └── ...
│ │ └── header
│ │ └── product
│ │ └── ...
│ ├── layouts/
│ │ └── Layout.astro
│ └── pages/
│ │ └── index.astro
│ │ └── ...
│ └── interfaces/
│ └──ICartItem.ts
│ └── ...
└── package.json
```
## 🧞 Instructions
First you need to create 👇 (if it doesn't exist) in `/frontend` folder:
### `.env`
Replace values with yours, without `/` in the end (❗️❗️❗️)
```
PUBLIC_SERVER_URL="http://localhost:1337"
PUBLIC_CLIENT_URL="http://localhost:3000"
```
To run the server:
```
open terminal
npm install (first time only)
cd backend
npm run development
go to http://localhost:1337/admin --> sign in (try to memorize your email/password ❗️)
```
To run the client:
```
open new terminal
npm install (first time only)
cd frontend
npm run dev
```
Make sure that urls match ones in `.env`, if not replace them.
🎉
## 💻 Preview:
