Question about deploying back end to Vercel from a monorepo from where front end has already been deployed.
I'm working on a full stack project (my first one) in a monorepo. The repo contains client and server directories, like so:
project
¦ README.md and other general stuff
¦
+---client
¦ src and other client stuff
+---server
¦ src and other server stuff
I have deployed the client using Vercel's git integration, i. e. I provided them with a URL to the repository and specified the optional root directory in which they should look to find the source. That points to /client and it works fine. Deployments happen automatically as I push to master.
Now I'm starting to build a GraphQL back end and I have the first version ready to be deployed to verify everything works. I was planning to do this by creating a new project on Vercel the same way I did with the front end, and then just specify the root directory to be /server instead of /client. Problem is, as I do it I get redirected to the front end's deployment and a message saying "The project already exists", because the GitHub repository URL I entered already exists in their system.
Is there a way I can deploy my back end on Vercel from the same repository or should I deploy it with some other provider like Netlify or Heroku?
You may want to follow the Monorepo example (#3547) issue in the Vercel repo. It looks like they're getting close to releasing initial support for deploying from monorepos. In the interim, I've deployed my Next.js apps that are in Yarn workspaces to Netlify where monorepos are already supported and seem to work well.
Related
I've been trawling documentation on Netlify's site for how to deploy a node application (specifically a Vue application) which has a private npm repository as a dependency.
I have an .npmrc file setup as follows:
//npm.pkg.github.com/:_authToken=${GITHUB_TOKEN}
#my:registry=https://npm.pkg.github.com
I also set the GITHUB_TOKEN variable in my build process's environment variables to the correct value.
However, the build fails.
There is an outline of how to achieve a successful build with a private Github package repository here: https://docs.netlify.com/configure-builds/repo-permissions-linking/#npm-packages.
However, it's still unclear as to what I need to do specifically to both my package.json file and also how to configure the build process' environment variables ...
Could anyone show me a full working example which doesn't leave me scratching my head?
Do I add:
"package-name": "git+https://<github_token>:x-oauth-basic#github.com/<user>/<repo>.git"
to the dependencies section of the package.json?
If yes, how do I then hide my <github_token> and provide the build process with this in Netlify?
How do I also get the same process working locally?
Why can't Netlify just inject the GITHUB_TOKEN into my .npmrc file so I have parity with my local development environment?
I tried uploading my files to Github, but GitHub says it's too big.
I then uploaded the content of the dist folder after building for production.
This worked just fine, but it's not very useful.
What is the proper way to upload a Vue.js app to GitHub?
What you generate (binary files which can be big) should not be versioned/pushed to GitHub.
It is better to use a local plugin which will, on GitHub side, build, tag and publish a release associated to your project.
For instance: semantic-release/github.
You can combine that with a GitHub Action, which can take that release, and deploy it on a remote server of your choice (provided it is publicly accessible from GitHub): see for example "How to deploy your VueJS using Github Actions (on Firebase Hosting)" from John Kilonzi.
For your existing dist, you should delete it (from Git only, not your disk) and add it to your .gitignore:
cd /path/to/repo
git rm --cached dist
echo dist/>>.gitignore
git add .gitignore
git commit -m "Delete and ignore dist/"
git push
What happens if I add a node module( like if I decide to add an image cropper). How can the other contributers deal with that?
You need to add the declaration of that module in your project, not version the module itself. For instance, using Vue.use.
Also: I host the app on netlify. It builds the site straight from github. But it wont be able to build the site if gihub doesnt have the dist folder...
See "How to deploy your Vue app with Netlify in less than 2 min!" from Jean-Philippe Fong: Netlify itself will build the dist (from your GitHub project sources) and publish it.
You should add a .gitignore file to the root of your directory where you can ignore files and directories.
Most typical ones to ignore are the following:
node_modules
/dist
.env
.vscode
I started using react native 2 months ago , and when i create i project by expo init, I see that .expo-shared is not ignored, and it seems like it contains someting like a token,
so as a newbie with a web development background, I wanna know if it is okay to push it to the public repository.
There's a README in that folder which says:
> Why do I have a folder named ".expo-shared" in my project?
The ".expo-shared" folder is created when running commands that produce state that is intended to be shared with all developers on the project. For example, "npx expo-optimize".
> What does the "assets.json" file contain?
The "assets.json" file describes the assets that have been optimized through "expo-optimize" and do not need to be processed again.
> Should I commit the ".expo-shared" folder?
Yes, you should share the ".expo-shared" folder with your collaborators.
So that should answer your question
I have not git-ignored mine and all is well, but as this is an expo internal folder, you could add it to the git ignore file without problems.
I have followed these steps:
Made a vue project with Nuxt.js (tested and working with npm run dev)
Used Nuxt.js static site generation to generate a static distribution under the dist directory of my master repository (also tested using VSCode's Live server plugin, works fine).
Deployed the dist directory to the gh-pages branch using: gh-pages -d dist
In the Options for my GitHub project, which is the GitHub Page for my user (augusto-moura.github.io/), I changed the Source to gh-pages.
The gh-pages branch seems to hold exactly what it's supposed to, but as I open the page, the scripts aren't loaded and each return a 404 eror.
What am I doing wrong? GitHub seems to not be serving the JS files inside the _nuxt directory.
you need to add .nojekyll file at root dir when publishing to GitHub Pages, otherwise it won't get resource files from _nuxt dir.
As indicated in the How to deploy on GitHub Pages? guide, in this tiny, easy-to-miss note...
Branch gh-pages for project repository OR branch master for user or organization site
In order to use Pages for your user account, you need
push-dir --dir=dist --branch=master
My Environment
When I develop vue project, I keep track of files in dist folder.
My laptop
I develop vue project -> npm(yarn) run build -> git add everthing in dist folder -> git commit -> push
Production server
git pull -> Everything is good to go (since I already built dist folder on my laptop).
I have URLs of production server and localhost server in my .env file
VUE_APP_PRODUCTION_API=https://myprodserver.com/
VUE_APP_LOCAL_API=http://localhost:3000/
When I use
vue-cli-service serve, it uses localhost server url.
vue-cli-service build, it uses production server url.
(so URL is allocated in build-time, not run-time)
The Problem
But I came across a problem when I added a qa server.
Now, there are three envrionments
1. My laptop
2. qa server
3. production server
I found that vue project in qa server tries to talk to PRODUCION_API (since It pulled the dist folder for production server which I built on my laptop and committed).
What I tried
I created the .env.local in qa server and overwrote the VUE_APP_PRODUCTION_API
# qa server .env.local
VUE_APP_PRODUCTION_API=http://qaserver.com/
and installed npm, yarn
and build
it worked! But... the problem is it makes git status output dirty.
when I git status
changes:
file removed: dist/file...
file removed: dist/file...
file removed: dist/file...
file removed: dist/file...
I know I can .gitignore dist folder, and build everytime when I git pull in each environment... but that would be bothersome. that would make me have to install npm, yarn, and install whole dependency in production server too. (It wasn't necessary before since I used to build on my laptop)
Question
Do I have to build the project everytime just to change the base url?
Was it right to keep track of dist folder from the fist place?
Is there any Best-Practice you could share me?
Ideally, you would want to deploy your project using a tool like Github Actions or Gitlab CI.
This would allow you to build your projects with the necessary environment variables for the given target environment.
In general, the dist files aren't included in version control, as each developer working on your project would have different versions of it and you would encounter merging conflicts really often.
Here's an example using Github Actions, deploying on Github Pages