SpringBoot and Vue3, separate repos
PID: 316b545c-54be-4dbc-a060-bd5b8345755a
Hi, I'm struggling to get my Vue repo to build and deploy in Railway.
I started out with a monorepo of two modules (didn't know better) and separated them into two repos to have it be compatible with Railway.
I've tried different POMs, no POM, searching for similar issues. Nothing worked for me.
Right now I'm getting this error
[ERROR] Failed to execute goal com.github.eirslett:frontend-maven-plugin:1.15.0:npm (npm run build) on project m1rza-sp-frontend: Failed to run task: 'npm run build' failed. org.apache.commons.exec.ExecuteException: Process exited with an error: 1 (Exit value: 1) -> [Help 1] which then causes more errors resulting in Error: Docker build failed.
The execution of npm install seems to have worked though.
I'd appreciate it if someone could point me in the right direction.108 Replies
Project ID:
316b545c-54be-4dbc-a060-bd5b8345755acare to share your two repos?
Actually, a monorepo would have worked fine, most likely - just set the root directory.
you handle the java app, I'll handle the vue3 app š¤
It looks like you're using Maven to build your frontend? If you're using two separate repos, you should consider using Vite
sorry, I couldn't help noticing
how did I end up as the Java guy, anyway? I don't think I even wrote the provider
oh right the templates
exactly, I have the front-end templates so that's my thing š¤£
Hello @Brody and @aleks, thanks for the quick response. I posted this issue and fell over asleep. š
I actually have 3 repos: 1 monorepo with SB and Vue, and 2 separate repos. I'm flexible on which to use.
Ye, I've never really worked with frontend till now, so Idk a lot about frontend build tools and such.
How do I do that without making it completely public for everyone?
let's go ahead and use your isolated monorepo, so you can add us to the repo? my gh username is brody192 (I forgot alek's username)
aight, thats good, adding
added
in the monorepo mvn build fails with
screenshot of the railway project please
this?
monorepo + two standalone repos
Railway
Railway
Railway is an infrastructure platform where you can provision infrastructure, develop with that infrastructure locally, and then deploy to the cloud.
oh you're already using vite for your frontend like aleks suggested!!
aye
https://mydeveloperplanet.com/2023/02/01/how-to-setup-spring-boot-with-vue-js-frontend/
followed this guide
mydeveloperplanet
How to Setup Spring Boot With Vue.js Frontend
In this blog, you will learn how to setup a Maven multi-module project which consists out of a Spring Boot backend and a Vue.js frontend. The application itself will not be created, only the setup ā¦
(and a few very similar guides) but I just fails š¦
note: no quasar
so either way, if you have a monorepo with two apps, or two repos with a single app per repo, you still have two apps, so you still need two services
oh
so you can delete that service called
SteamPlannerdone
the remaining two services are based on the two separate repos
we can leave them, they're perfectly named for what we want to do
give me a few minutes to look over the frontend and advice further, I'd only be able to help you deploy the front-end though as aleks has the java experience not me
thats the only help i need š
sure thing, i'm standing by, take your time
I'm seeing some things that are out of place, let's delete the node folder and the pom.xml locally and on github from the frontend folder, this isn't all we'll need to do, but it's what I've seen so far
doing
delete the pom inside the frontend module?
yeah
it's a JavaScript app not a java app š
š
i just started doing vue stuff last friday man š
deleted
well then you already know more than me about vue
my github username is aleksrutins
there is also frontend\angular\node?
vite doesn't have a sufficient production ready web server, so we'll need to setup one ourselves, let's use caddy
https://github.com/railwayapp-templates/vue-starter
copy the nixpacks.toml and Caddyfile from this repo into your frontend folder
what do you mean?
invited
doing
yeah we don't want that in the repo
It looks like this guide doesn't actually require a separate server for the frontend, despite what it says at the top
in fact we don't even really want it locally either haha
done
deleted that too
deleted locally too?
aye
you have a .txt extension on the Caddyfile, pro tip, turn on file extensions in windows
shit, fixed
add a service variable
VITE_BACKEND_URL to the frontend service with https://${{SteamPlannerBackend.RAILWAY_PUBLIC_DOMAIN}}added
The current frontend service is based on the separated frontend repo.
then on line 28 of your SharedLibrary.vue file (and everywhere else you make a fetch call) change it to
import.meta.env.VITE_BACKEND_URL + "/library/shared/" + this.steamIds (of course other fetch requests would have different paths, but you get the idea)done
was that the only place you do a fetch to the backend?
nah, there was 4-5, i changed them all
okay perfect, you work fast
HOWEVER, i changed it in the monorepo
gotta go fast
yeah that's what I'm shared to, and that's what we are going to use on railway
kk
so set the root directory on your frontend service to
/frontend and then attach the monorepo to the servicedone, i think i see where you're going with this
interesting
I assume you can build the front-end locally without problems via
npm run build right?ye
can you send your build logs please https://bookmarklets.up.railway.app/log-downloader/
well now the local build fails because
which is my mistake
since i failed to use brain
fixing
oh right you'd need a
.env.local file with that variable defined to the local address of the backend
http://127.0.0.1:8000 I think it was?8080, but yes
close enough :kekw:
local npm run build works
service still fails with MODULE_NOT_FOUND
can I see a screenshot of your local project files for frontend
looks good to me as far as I know
what node version do you use locally?
20.11.0
There is this
in the service build logs
build logs please
that's using node 18, but you use node 20 locally, so let's try getting your build on railway to use node 20 also.
in your package.json set
engines.node to just 20.
delete your package lock file and run npm i --package-lock-only to re-generate it.
push the changes, if the build fails, send logdoing
still fail, same error
Tried with engines.node 20 and 20.11.0
you just sent the same file?
sry, misclick
they have the same context
sent ya the marked one
not quite
try this solution? https://answers.netlify.com/t/react-vite-build-fails-because-of-rollup-rollup-linux-x64-gnu/107504/7
super fresh logs
ok trying
š®
IT IS UP
woohoo
Do I set the Backend service to monorepo and set directory to /backend?
ofc i do
yeah, but if theres build errors, i likely wont be able to help, java is alek's thing and i have never even touched a single line of java
smart man
java makes me age
why use it lol
but then every language does that
you use ts for the frontend, just use ts for the backend too
and throw away the years spent paining through java? never!
fair enough
gonna have to teach the backend to talk to the service now
CORS and shit
but you did solve the problem i had
thank you man
trains for ya
thank you i appreciate that
Quick question, in the backend service I've gotta enable Private Networking and reference this value in the frondend service as a variable?
this is a client side rendered app, you would need to use the public domain, wouldnt me much of a private network if a users browser could make requests to it.
aye
ofc i knew that immediately
its easy to overlook
everything is up and running, working on new features now. thanks again to the both of you
happy to help ā¤ļø