How to deploy express.js on Netlify
Vložit
- čas přidán 7. 09. 2024
- How to deploy an Express application on Netlify using Netlify functions.
Example GitHub repository: github.com/owe...
---
Thanks for watching! Make sure to leave a comment letting me know how you enjoyed the video!
Twitter: / owenconti
Website: owenconti.com
Projects:
RemoteAuth: remoteauth.com
Released: released.xyz
Thank you! After so many useless tutorials, your video was the quickest and easiest to follow!
YES!
Exactly. Thanks to this guy
You don't mince words bruv. Straight, to the point, and accurate. well done.
Thanks David
Thanks for the video! I struggled a bit for a while because I was getting error when running npm start. It was because I was not tabing the line functions = "functions". So pay attention to that if you struggle too.
Tried that, but the functions folder never appeared.
This is the simplest and the best tutorial for uploading NodeJS server to Netlify. Thanks dude!
Are these features free?
Yes, up until certain page view limits. Check out Netlify’s pricing page
nice tutorial - thanks! Meanwhile the npm-script needs no longer the "./node_modules/.bin/" in front
This helped!
ty bro
Why did you specify full path in "scripts" section like "./node_modules/.bin/netlify-lambda serve src"? It should be just "netlify-lambda serve src". Is there some specific reason for specifying full path?
Omg thank you
Thank you very much
The only resource I could find that helped me deploy to Netlify. Thanks Owen!
straight to the point, thanks this saves a lot of time.
Windows: if you are Getting 'NODE_ENV' is not recognized error , just do npm install "npm install -g win-node-env" and also replace "./node_modules/.bin/netlify-lambda" to netlify-lambda in package.json
Thanks a lot🙏
thank you man
Excellent tuto, thanks, I have just this warning message when running but it still working nicely : "WARNING in ../node_modules/express/lib/view.js 81:13-25
Critical dependency: the request of a dependency is an expression
@ ../node_modules/express/lib/application.js
@ ../node_modules/express/lib/express.js
@ ../node_modules/express/index.js
@ ./api.js
Great video! this is exactly what I was looking for. I followed the video exactly and got it deployed in 10 minutes, thanks again!
Great tutorial, thank you so much. Been looking for this after so many unclear and failed tutorial. You're awesome
Hey brother how did the functions directory appear for you out of nowhere?
Hello great video but I have this when I run npm start: start
> ./node_modules/.bin/netlify-lambda serve src
'.' is not recognized as an internal or external command,
operable program or batch file.
same here
You can try using 'npx netlify-lambda serve src'
delete the './node_modules/.bin/' part
Thanks@@andrewv6445. Using "netlify-lambda build src" fixed this. Thanks
Thank you Owen. This is the best tutorial I've found integrating Express with Netlify Functions. Thanks again!
quick and well-defined video for netlify express. Great buddy!
Thank you so much! So helpful been stuck on this for a long time
Solid tutorial, to the point, no bullshit. Thanks !
Wow brilliant. Been looking for some tutorial like this. Thanks so much
This is super solid and well produced, cheers!
that`s great. thanks you! quick, simple and useful
Amazing video, clear & to the point. Thank you so much!
I'm getting a
"'.' is not recognized as an internal or external command,
operable program or batch file." error when running npm start. Anyone know any fixes?
Did you fix it?
It should be just "netlify-lambda serve src".
Who else checked his speed setting to make sure it is on 'Normal'
Ha, too fast?
Thank you so much! Very simple and informative.
Thanks a lot man, this video really helped me. ❤️
'.' is not recognized as an internal or external command,
operable program or batch file.
delete the './node_modules/.bin/' part
Hi, what do I do if my index html file is located into a different folder like “Views”
Have you solved this?
In my case I don't even have an index.html file, I use a render engine, is there a way to deploy an app like that? (SSR)
@@ronpb3943 Exactly my issue , trying to deploy an app that has ejs pages using render engine
It is showing me this error: ModuleNotFoundError: Module not found: Error: Can't resolve 'mock-aws-s3'
Someone pls help
you created the functions without showing.. please is there any reason for this ?
what is in folder "functions"? how did you created? and what is in that folder?
im getting this problem : Can't resolve 'aws-sdk'. please help
superb brother Owen!
Thank you Owen... that helped a lot
Hey Owen, great video! but I tested your example with Ejs and it got me an error of "Cannot find module ejs" although it's included. I hope you can help me with that.
I'm now hopping with happiness
What a lovely tutorial. Subscribed.
Can you do a video on dockerization of Cordova/ionic app, like a build service to save time?
It's freaking great. Thanks so much
Hello, my friend, you did a great job, I'm not a Hindi speaker but I understood almost everything you did, I'm trying to deploy my project on Cyclic but I have an error that says this "Error: ENOENT: no such file or directory, stat '/var/task/client/dist/index.html'", I used Vitejs to start the client folder and I don't know if this is the main problem.
its telling me. The loader cant find the module
I get this error: Support for the experimental syntax 'jsx' isn't currently enabled
it doesn't work on react?
But for me only files in that source directory is working, but my projects have multiple subdirectories. How to build files in those subdirectories ????
Awesome, thank you!
You're welcome!
Very nice and quick video! Looks like you missed covering functions folder. did you create api.js under functions folder?
It is automatically created for you by the netlify dev tool
@@owenconti ok got it. Thanks for the quick response!
I halva a mono repo with 2 project(angular & express). Is it possible to place netlify.toml file inside the express app instead of root? so that it wont affect my angular build.
Set the base directory for each project in the Netlify UI, and then put each netlify.toml in the base directories
I am getting this error
[
ModuleDependencyError: Can't import the named export 'Grammar' from non EcmaScript module (only default export is available)
where can i keep my modals , in src or in the root folder
whats inside functions folder? there is no functions folder in your git repo..
thanks a lot a very useful tutorial
its saying
> netlify-express@1.0.0 build
> ./node_modules/.bin/netlify-lambda build src
'.' is not recognized as an internal or external command,
operable program or batch file.
Try just "netlify-lambda build src" instead of having the whole path
What is present inside 'functions' folder?
So basically we only need the netlify-lambda to make it work on netlify, right? Anyway, I have a question about the npm script, why did you call it directly from ./node-modules/ and not something like only netlify-lambda?
I didn't know you could call local node modules without specifying the path!
Hello dear its awesome video but one question why create functions directory and in which files have so litle bit confusion.
Nice video sir! but I want to ask a question. I have a custom setting on my package.json for deploying a website on herokuapp :
package.json
"scripts": {
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
}
^ How can I run this on Netlify settings? because my folder structure didn't look like yours.
Well this was disappointing. I posted a question on the Netlify community forum. I edited the post to add what I thought might be a promising article, and my post was "temporarily" ??? removed. I hope this video will help me. I'll let y'all know.
3:40 Can I use npx instead?
Thanks for the video. I deployed from my bitbucket. but It is failed. Deploy did not succeed: Deploy directory 'dist' does not exist. Could you let me know what's is the reason?
'.' is not recognized as an internal or external command,
operable program or batch file.
there is an error how to overcome this???
delete the './node_modules/.bin/' part
How can I do this but with MongoDB? I’ve been struggling for quite some time
Yeah, I'm now trying to apply this with mongoose js.. and everything seems fine but doesn't work because of Mongo DB, throws an error _"ModuleNotFoundError: Module not found: Error: Can't resolve 'mongodb-client-encryption' in 'D:\JS_React\ToDoBook2
ode_modules\mongodb\lib'"_
UPDATE ..and I've just solved the problem by googling the error ))
Hey Owen I keep getting cors error when trying to make a get request from my front end. I enabled cors in express but that doesn't do anything. I also added
[[headers]]
for = "/*"
[headers.values]
Access-Control-Allow-Origin = "*"
to my netlify.toml file.
from where comes the function directory bro please im stuck ?
If i have done this in typescript, how can i convert it to use the what you have done?
Great tutorial
thank you for sharing. I taking an error like "Function invocation failed: Error: Cannot find module 'C:\_DEV\_FLUTTER\my-app\server\functions\api'" Have you any idea about it ?
What your functions folder contain? Mine does not work until I manually add a folder 'functions/api' and copy all files in that folder. (I am using TS, so I have to copy all the JS generated files to functions/api, otherwise it does not work)
Do the generated files create a /functions dir?
@@owenconti when I run the serve command it does generate the folder and all the generated JS files in it. To get it working, I have to manually create functions/api folder and move all the files from functions to functions/api. Then it works.
@@hafiztemuri2408 I haven't used TS with this, but you can try changing the `functions` directory in netlify.toml to point to your compiled functions folder, something like:
functions = "dist/functions"
@@owenconti I opened a github issue here, github.com/netlify/netlify-lambda/issues/350
@@owenconti actually this seem to worked, I changed script to `"start": "tsc --outDir dist/api && netlify-lambda serve dist/api",` and `functions = "dist"`. Thanks for the suggestion!!!
So you can really deploy a dynamic website for free? Holy sheeeesh
Good one! Font is too small, you can change in next video
What is lambda , why can't we normally host like we do on heroku ?
you didn't mention about functions folder
I am not able to run locally. It is producing error
> ./node_modules/.bin/netlify-lambda serve src
'.' is not recognized as an internal or external command,
operable program or batch file.
Please help
Maybe this is a bit late, but here is the fix:
Change: "./node_modules/.bin/netlify-lambda serve src"
To: "netlify-lambda serve src"
@@ErlandssonA Gives this error
at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
@@Roronoa1062 Yeah I think all of this is outdated
how work with express.static with netlify?
I cannot get the correct URL for get the image.
thanks for video
how to deploy ejs developed website on netlify.how to ejs with netlify.Please provide me the solution.Thank you
hey, buddy! 1 thanks for the tutorial - it works, 2 I have question: I've got a .env file in my project.. I cant share it Github right? So how do pass my variables to my app?? I mean in order to save it on Netlify..
You'll define them in the Netlify UI. Search Google for Netlify .env vars
@@owenconti thanks man, I've just successfully deployed my app!
What are the advantages to having an express app with a router separate to the front end if we are just using Netlify functions, wouldn't it make more sense just deploy your functions with your front-end in a "functions" folder which will create your endpoints based off whatever they are named automatically?
I don't disagree. I think one of the advantages could be that you are able to utilize 3rd party packages that are written around express. For instance, maybe there's an express middleware that you use to log HTTP requests as an example.
The video explains *how* to do it, not necessarily that you should/the use cases for it.
Thank you so much
The title is how to deploy your express.js to netlify, but we cannot even see how to do that because it is already deployed in your netlify account. The tutorial is good but one of the important part is missing
You don't have to do anything, that's the point of Netlify. Connect your Git repo, use the settings that I show in the video and you'll be set.
Hi... does not works here... Page Not Found :(
It works in localhost only.
Resolved. Tank you! Great tutorial..
how did you create functions folder?
It’s generated for you when you build the project
is this the only way to deploy an API written in node to netlify ?
thanks though for the tutorial, it's the only viable thing I have found online
Probably not the only way to use node with netlify, no. You can just use a pure node index.js file.
Thanks king
What about connecting a DB? Would you have to cloud host that elsewhere?
Yep you’d have to host elsewhere and it wouldn’t be the fastest because of the latency between netlify servers and wherever the DB is hosted
What did you include in your functions directory? I dont know why you cut that part OR it was an error!
You don't have to put anything in the functions directory. The netlify-lambda package automatically puts your compiled application from the src/ directory into the functions/ directory. It does this based on the netlify.toml configuration file.
Oh See Media ohh ok. Thanks.
I lost at the last part, how did you deploy it to netlify, like uploaded the file, please show it.
Hi John, you have to setup a new project on Netlify's side and point the project at your git repository. I show my configuration details at 4:44 in the video. Netlify will automatically build and deploy the application whenever you push changes to the repository.
Thanks for the great video!!! but i have a problem when i trying to fetch data from the API i rcving CORS err, could u oks explain how to fix it?
If running on Chrome, you can try adding the CORS Changer extension to your browser. Think it works for Firefox too. Why this error happens? -> I'm not sure.
because when you use serverless, your express app is run in a browser environment instead of a node environment. most modern browsers do not allow websites to call APIs hosted across different domains.
you can use cors package, by installing npm install cors, and use it in app like app.use(cors())
Great video. My api works following these steps until I try to get information from a json database, I get a 500 Error message instead. Is this possible with netlify-lambda? It works locally but not on production.
Are there logs you can look at to debug? Are the DB credentials correct?
same issue for me - locally this works great, but as soon as it's deployed, I get a generic 500 error when trying to GET and POST. I'm using a simple file-based DB (diskdb)
Thanks a lot!
Hi Owen, your videos really helpful, but I get an error on npm start, '.' is not recognized as an internal or external command. Can you help me on that. Thanks!
instead of specifying a path in the script try: "netlify-lambda serve src"
@@calebpena3729 Great answer i actually thought it had something to do with the script type because i write module type. I couldn't find an answer to this problem till i found your answer!
delete the './node_modules/.bin/' part
netlify-lambda is now depreciated in 2023.
Hello I actually have a question about Netlify, Are external API calls allowed on their free tier? Im trying to send mail with sendGrid when I make a POST request on a certain endpoint. The mail works with Node locally, Netlify local deploying but not Netlify hosting (on MYAPP.netlify.com) . please help. also the file is here github.com/Dada-Tech/portfolio-emailer-netlify/blob/master/src/api.js Thanks in advance !
Hi David, I am not sure if Netlify blocks outgoing requests. Do you see any errors in the logs?
@@owenconti No, I dont see any errors. Maybe I'll just ask Netlify directly
Well you video is awesome but i have monodb connected to my app. how can i resolve my problem with mongodb. its giving me an error "Error: Can't resolve 'mongodb-client-encryption'"
That sounds like the dependency is missing from package.json
@@owenconti Yep i forgot to install all the packages. thanks ;)
@@owenconti Hey there.. during deployment on Netlify. it gives me same error for modules missing. but i have pushed my updated code to github and still i am getting error. i have mongoose package name in my package.json file.
@@code_react Do you have the 'mongodb-client-encryption' package in your package.json too?
@@owenconti No but i installed that package. but after uploading my node express app to netlify. all of my routes were not working in postman. I have used mongodb.
Could you demonstrate hosting on netlify
What kind of app are you looking to host on netlify?
@@owenconti nodejs express
Thanks for making the function folder off screen and never showing what's in it?
It’s the compiled output. I never actually created it, the scripts do. But I apologize that the edit suddenly shows it
the functions directory just appeaed out of nowhere
LMAO, Right
bro, you completely skipped over the part where you created the 'functions' folder.
nah bro. just run `npm start` and it's created automatically for you.
Is netlify free just like heroku?
There is a free plan, yep
cool
Please make it more elaborated.
I was not able to follow.
Which part did you get stuck on?
@@owenconti i got it after watching once again thank you very much.
Hi Owen
How does post work?
what if you don't want that string '.netlify/functions/api/' in your url ? What if you just want it to be /
Everything works fine, but I'm trying to get rid of the "/.netlify/functions/api" in the url and just shorten it to "/". So far I've learned there is the way of using redirects from netifly. Either in the netifly.toml file or with _redirects file. Both solutions don't work for me, nothing gets redirected. Anyone has any idea?
Did you find a solution?
Hello, my friend, you did a great job, I'm not a Hindi speaker but I understood almost everything you did, I'm trying to deploy my project on Cyclic but I have an error that says this "Error: ENOENT: no such file or directory, stat '/var/task/client/dist/index.html'", I used Vitejs to start the client folder and I don't know if this is the main problem.