I'm a senior .NET developer wanting to move into MERN, full-stack. Is there a scaffolding tool that will quickly get me setup and that also supports authorization (register/login features, etc), built-in?
Express development is fairly unopinionated. As a result of that flexibility, there's a lot less built into it than there is in more opinionated framework like Rails for example.
The other thing is that since the MERN stack isn't monolithic, you'll need to set up the front and back ends independently.
The two most common 'scaffolding' tools I've come across in MERN development are Create React app and Express generator. These will get you started with a front end and a server that will run immediately, but for things like auth, you'll either need to build your own, or install packages that will handle it for you.
I've seen open source templates on Github that you can start with, but since things change so fast, I personally don't like the idea of starting off with someone else's outdated code.
Hope that helps!
For whoever lands on this page like I did.
I found two option for MERN scaffolding. The first is deprecated and the second seems to be abandoned and/or incomplete:
mern-cli (http://npmjs.com/package/mern-cli) (DEPRECATED)
mern (http://npmjs.com/package/mern) (ABANDONED)
My solution was to keep my React UI and Express API on separate directory, say "ui" and "server", in my project's root directory.
Then I use the cors module (http://npmjs.com/package/cors) to handle cross site resource sharing for development environment only, so that my react app can talk to my express server, which is running on a different port during development, like this (in server.js)
const cors = require('cors');
if (app.get('env').trim() == 'development') {
app.use(cors());
}
For production I just run a batch script that copies all the files from my ui/build directory to server/public directory after the react build process is complete. The scripts section of my package.json looks like this:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"postbuild": "copy-build.bat",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
And the content of batch file reference in the postbuild key is
xcopy "build\*" "..\server\public" /s /y
If you prefer or have to use a bash script instead you can make a copy-build.sh file with the content
cp -r build/* ../server/public
Related
I have been struggling with deploy a next js application to azure app service as we want to render the application both static and dynamic so we need the node server to run. Is any body there is help me.
Note: I have already watched these videos and also applied these methods like adding the web.config and server.js files to root of my website but no luck it does not work. Also this article
https://parveensingh.com/next-js-deployment-on-azure-app-service/
but no luck.
A more detailed answer including steps using source control you can refer to.
I also test deploying directly from VS Code, which works fine, too.
Just like the link Monika post, the step to modify package.json you might forget. And make sure your project works well locally before publish to Azure.
package.json:
"scripts": {
"dev": "node server.js",
"build": "next build",
"start": "node server.js"
Below mentioned way's do not need server.js file or next export or pm2 scripts for deployment process.
Keep your package.json scripts as default next scripts:
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
}
Way 1: VS Code - Azure Extension
Add below environment variable in your Azure App Service from Settings > Configurations
SCM_DO_BUILD_DURING_DEPLOYMENT="true"
Right Click on Azure App Service item and select Deploy to Web App option.
Select root folder for deployment.
Way 2: CI/CD Pipeline through Azure Devops(https://dev.azure.com/)
Here is a sample post you can refer
All credits goes to Suhas Talekar
https://itbusinesshub.com/blog/nextjs-node-app-on-azure-app-service/#how-to-host-next.js-app-on-azure's-app-service
Only change is you don't need pm2 script as startup command and no
need to create ecosystem.config.js file as well.
Rest process is same.
Starting nextjs app is taken care by Azure.
When I save changes to my client-side code, the browser hot-reloads as expected. But when I make changes to my server code, no hot-reloading occurs. This is a problem because we want to just run 1 command (i.e. npm start) to launch our React webpack-dev-server AND our API server, and rerunning the entire npm start to manually relaunch the server after changes is slow (because it unnecessarily relaunches the React dev-server as well). Also sometimes we forget to relaunch the server code, so in reality it should just hot-reload anyway.
I've looked across the internet and surprisingly can't find any straightforward solutions. I feel like I shouldn't have to eject the entire project and go deep into the webpack configurations to get this to work.
This is what the npm start portion of my package.json looks like now:
"scripts": {
46 "start": "concurrently --kill-others \"react-scripts start\" \"node server.js\"",
...
}
Is there perhaps a way I can do "react-scripts start" with a different target or something?
Is it possible to launch create-react-app App in a certain browser of my choice? Currently, it always runs in the Chrome while I want it to do that in the Chrome Canary. Does anybody know?
You can use BROWSER environment variable to set which browser you wanna open the app in. For example,
BROWSER=firefox yarn start
or
BROWSER=firefox npm start
will open the app in firefox.
So, you can put something like this in your package.json
"scripts": {
"start": "BROWSER=firefox react-scripts start",
"build": "react-scripts build && sw-precache --config=sw-precache-config.js",
"test": "react-scripts test --env=jsdom",
You can read more about it in this pull request thread
With current iterations of create-react-app this can be accomplished by adding a .env file to the project with a "BROWSER" key. It's described in the Advanced Configuration section of the documentation.
If you want to use Google Chrome Canary for your development browser (as I do) then you'll need to create that .env file in the root of the project with the following contents:
# Override default browser for npm start in react-script
BROWSER=Google Chrome Canary
Be sure you don't get overzealous and quote it or add a semi-colon at the end. I did both and scratched my head at first why it didn't work.
You can use .env file with BROWSER=firefox
https://create-react-app.dev/docs/advanced-configuration/
This worked for me:
Set Chrome Canary as default browser in PowerShell (choose the right path first)
$chromePath = "${Env:ProgramFiles(x86)}\Google\Chrome\Application\"
$chromeApp = "chrome.exe"
$chromeCommandArgs = "--make-default-browser"
& "$chromePath$chromeApp" $chromeCommandArgs
(answer from)
https://stackoverflow.com/a/17536704/11878186
Set variable BROWSER=Chrome in .env file in root directory
I have a node app which in development is usin 2 servers one for my node side and another for my react side. I am running this using a line in my package.
"scripts": {
"start": "node app.js",
"server": "nodemon --inspect-brk app.js",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\""
},
when I run npm run devit all works, however when I run node start the server starts running however when you go to the / root url it gives a 404 status error. I assume that's because the app doesn't know where to look for the index.html file or how to kick off the app though I could be completely wrong.
my folder structure is:
As you can see my client folder holds all of the react stuff. the src is the uncompiled react and the build holds my actual index.html fil along with the static folder which holds the compiled react stuff :
so how do I get that to actually work or point me in the direction to look? I guess i've been spoiled with most apps just knowing out of the box how to do this.
UPDATE:
so i have 2 routes currently setup
//initiate route handlers
app.use('/login', require('./routes/authRoutes'));
app.use('/tiles', require('./routes/tileRoutes'));
inside of /login I have for example
router.get('/', (req, res)=>{
some code here...
}
however going to either of those, so if I navigate to localhost:5000/login, I still get a 404 error
If I understand this correctly it works when I run npm run dev because 2 serves spin up. the one server handles all my node code and the second handles all my react code. However I don't want to run 2 servers as my deployment to heroku definitely won't. So how do I merge to 2 so to speak?
Use express.static() function to host static files on your express server. See more here: https://expressjs.com/en/starter/static-files.html
I have completed todo app by learning from this video:
Super MEAN Stack Tutorial: Angular, Node/Express, Webpack, MongoDB, SASS, Babel/ES6, Bootstrap
In that video at time 19:18 at this url it is taught that I should use the below two commands in seperate git-bash instances if I want to run it in windows using npm run dev:
node server
webpack-dev-server --progress --colors
But in Linux (or any other OS than windows) you can use this script:
"Scripts": {
"start": "NODE_PATH=$NODE_PATH:./src node server",
"dev": "npm start & webpack-dev-server --progress --colors"
}
So, Is there any way I can do the same in windows?
Also, In that tutorial I can see that port no. 3000 is assigned to node server, but due to using dev dependencies he runs the localhost:8080 in browser. You can see that here. After the tutorial finishes, I followed along and created that app. Now I would like to deploy it. So, I would first like to learn to run test my site in non-dev dependencies mode. i.e. when I type localhost:3000 in browser, my app should run successfully. So, can anybody explain the steps for that?
Update:
I am a newbie in node.js. I watched many videos on node and tried to learn something from that. In all the videos I see that I run node server on port no. 3000 and then I type localhost:3000 in my browser. Now lastly I watched video about mean stack in which he uses webpack. Now, I am confused. I think there are two servers running. first server is webpack's server and second server is node's server. Upto today I typed localhost:3000 in my browser because I mentioned that port 3000 will be used by node in my code. But now in the video he is running localhost:8080 in browser. It means webpack's server is used. Then what happened to node server. Why can't I just run localhost:3000? Also in the video it is explained that webpack is a dev dependency. So, I think after the app is completed and ready to be deployed, my project can be run on the node server (by making some changes to the code, I am not sure). Let's take an example. Now I don't want to deploy the app to a real server. I want the same app to run on my friend's pc. He is not a developer. So, he should not depend on webpack as webpack is a dev dependency. So, he should be able to run the app on node server instead of webpack's server. So, he should type localhost:3000 instead of localhost:8080. That's what I don't understand.
Let's break this down:
If you've defined this script:
"Scripts": {
"start": "NODE_PATH=$NODE_PATH:./src node server",
"dev": "npm start & webpack-dev-server --progress --colors"
}
... then this npm command: npm run dev
... actually invokes these two actions:
a) npm start & # Runs NPM in the background
b) webpack-dev-server --progress --colors # Concurrently runs webpack in the foreground
You can accomplish the same thing in many ways using Windows, starting with a simple .bat file like this:
EXAMPLE: RunDev.bat:
start npm start
webpack-dev-server --progress --colors
=======================================================================
STRONG SUGGESTION:
Please forget about watching videos for a few moments. Try a couple of "hello world" tutorials. More importantly, play with the actual code. Try changing things in the code, and see what happens.
Forget about webpack, at least for the moment.
Think of npm as a "build tool"; not as a way to run your application. At least for a moment.
Focus on "node". Write a "node application".
Part of your "node application" will require "ExpressJS" and "Jade" (now renamed "pug" - I'm still using "Jade"). Use npm to get your ExpressJS and Jade dependencies, but stay focussed on Node.
SUGGESTED TUTORIAL:
A Simple Website in Node.js, Ben Gourley
Be sure to:
a. Download the code
b. Work through the tutorial, using the downloaded code
Please post back (a new post) with any specific questions you might have as you work through the tutorial.