[NRPPZW] 3. projekt - 2021/2022

MrPeanutButter

Jel se ovo čini ok za projekt ?
https://web2projekt3vuecli.herokuapp.com/

sekiro

MrPeanutButter ja imam jako slicno tome, ne trazi se nista lijepo, bitno da radi i pokazuje funkcionalnosti koje su te trazili

Lusy

MrPeanutButter Onaj prettiermi baca puno upozorenja, a vidim da ga oni u projektu nemaju u package.json, mogu li ga onda i ja maknuti?

AnamarijaM

MGJ ako imas vscode instaliras si prettier kao plugin i na on save ti sve sredi i formatira

MrPeanutButter

MGJ kada budeš build radio za deployment ako budeš stavljao na heroku to ti se više neće prikazivati

Gocc

šta točno predstavlja history mode, jel to ovo u kodu?

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

anon00

*** Da, to je to. On služi da npr možeš stisnuti back u browseru (pamti rute na kojima si bila)
Takoder kad deployaš na heroku vjv nece raditi tj. nakon refresha stranice ce se pojaviti ‘Cannot GET /…’ to popraviš tako da u root folderu imaš server.js u kojem importaš i .use taj connect-history-api-fallback

Konkrento moj server.js izgleda ovako:

Mozda je potrebno napraviti nekoliko npm install-a da bi ovo radilo (nisam siguran koji, ali definitivno:
npm install express i npm install connect-history-api-fallback

var express = require('express');
var connectHistory = require('connect-history-api-fallback');
var path = require('path');
var serveStatic = require('serve-static');

app = express();
app.use(connectHistory());
app.use(serveStatic(__dirname + "/dist"));
var port = process.env.PORT || 8080;
app.listen(port);

AntonioB25

Kako riješit da history mode radi kad se pokrene na heroku?
Kad pokrenem lokalno radi, al na heroku neće.
Pokušavam nešto s: connect-history-api-fallback al neuspješno

AntonioB25

Pleteni miš
Uspio sam, ne znam što sam napravio drukčije nego do sada, ali ugl ako koga zanima:

npm install connect-history-api-fallback
server.js mi ovako izgleda:

const express = require('express');
const path = require('path');
const history = require('connect-history-api-fallback');

const app = express();

app.use(history({
    verbose: true
}));
app.use('/', express.static(path.join(__dirname, 'dist')));

var port = process.env.PORT || 8080;
app.listen(port);

*ne znam kako stavit kod u okvir…

reygrep

ima neka dobra duša da mi kaze kako uopce treba generirat taj vue projekt pliz
koju god konfiguraciju i kombinaciju da sam probala mi failaju u izgradnji projekta

anon00

reygrep Trebala bi biti konkretnija jer nisam siguran na što misliš.
Ne mozes uopce startati projekt ili imas problem sa deployem na Heroku?

reygrep

anon00 startanje projekta, iliti vue create xxxx / vue init

anon00

reygrep Ovaj tutorial mi se cini dobar

Video #4 radi baš kreiraje projekta sa Vue CLI
Dalje pogledaj #5 i #6 (tu je lifecycle hooks - npr created,mounted i sl)
#7 msm da mozes preskociti, nije potrebno napraviti formu, a msm da nije nista novo uveo tu
#8 je router sto treba implementirati
#9 je dohvat podataka ( on tu koristi fetch, meni je cak lakse koristit axios library za to)
Ono sto mi se jos cini da fali je Vuex tj store za globalno spremanje podataka

Brzinski sam prosao kroz playlistu, msm da ce dobro poslužiti i ne koristi ništa dodatno što ti ne treba tipa typscript ili nekakav UI library

Mislim da u ovih 5 videa imaš doslovno sve sto treba za labos, osim tog vuex-a

reygrep

anon00 hvala ti puno!!

m21

Kako napraviti fetch na klijentskoj strani kada deployamo aplikaciju na Heroku, tj. kako bi trebao izgledati URL u fetchu?

laranotreallycroft

Kako vidimo jel deployano u production modeu?

LucidDreamer

laranotreallycroft ja sam stavio da je okej ak ima dist folder

reygrep

LucidDreamer sori, di se vidi dist folder

Extended_mix

LucidDreamer Doslovno ispod pitanja pise da se pogledaju kako izgledaju datoteke koje se dohvacaju, ako se dohvacaju html, css i js datoteke nagurane u jedan red, bez razmaka i bez nekih smislenih imena za variable onda je u prduction modeu, ako se dohvacaju datoteke koje lice na vue kod onda nije u production modeu.

Ovo pisem jer sam ja deployao aplikaciju u production modeu ali nisam ukljucio dist foleder u zip koji sam predao jer nije potreban za lokalno pokretanje.

anon00

reygrep u root folderu projekta
kad pokrenes npm run build on automatski stvori taj folder i citav tvoj projekt kompalira da bude staticki html i obicni js i css

reygrep

anon00 ah okej, nadala sam se da necu morat na svakom run build nego da se negdje na inspectu vidi, thanks 👍️

« Prethodna stranica