I'm running a MEAN stack webapp on Heroku. I have two folders at root level, "frontend" and "backend". Each folder has their own package.json. I have built the Angular app and put it in the "backend/public" folder. I can serve the Angular app from Express and deploy it to Heroku, no problem.
And here is my doubt: the Angular code in the frontend folder has its own dependencies, but when I build the app, run it on Express, or deploy it to Heroku, is it still using those dependencies from the node_modules folder in the frontend folder? Or are these dependencies somehow injected into the built Angular app's minimized code sent to the backend/public folder, for example?
I'm having trouble finding any info on this specific doubt.
Is it safe to have express server code and API keys in CRA project root directory and serve the build folder statically?
During the build process, does CRA copy or include content from any other files or directories except /public and src ? For example, in this process:
> npx create-react-app react-app
> cd react-app
> npm install
> npm install express
And then create react-app/server.js and react-app/config.js - and include API keys in config.js , server.js will serve frontend static files from the react-app/build/ directory.
Will any content from react-app/config.js be included in react-app/build/ directory after the build process? How safe it is to have server code and API secrets (.gitignored ofcourse) in a CRA project's root directory?
In general, it's not safe to store anything vulnerable on the frontend side, all secret information should remain on the dedicated backend or env-variables stored in CI/CD and inject during deployment to your variables/placeholders.
If you are able to hide your backend from publicity - you are on a good track.
I have backend based on express + mongoose. File structure is:
- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json
And regular create-react-app based folder for front-end:
- /src
-- /assets
--- index.css
-- /components
--- Somecomponent.js
-- /containers
--- App.js
-- /reducers
--- somereducers.js
- /node.modules
-- ...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json
I want to use it in proper way together. I wanted to organise it this way:
- /client
-- /src
...
-- index.js
-- registerServiceWorker.js
- .gitignore
- package-lock.json
- package.json
- /server
- /models
-- item.js
- /node.modules
-- ...
- server.js
- package-lock.json
- package.json
At this stage I stuck. I can make it if client folder inside server folder or if server folder inside client.
1. But how to make it run when two folders are siblings?
2. What should be package.json and where node.modules should be (whether both server and client should have it's own package.json and modules?)
The most basic structure would be to have a root folder that contains frontend and backend folders. Since you're talking about the MERN stack, you would have a package.json inside of your NodeJS backend environment and a package.json for your React side of things. Backend server and the frontend client are two totally separate things, so yes, they both have their own node_modules folders. On the backend, you'll probably have installed something like Express for your Node runtime, Mongoose for a more convenient way to talk to your MongoDB, etc, and on your frontend, you'll have your React as your frontend framework, Redux for state management, etc. Additionally, depending on what you have already listed inside of your package.json files, when you run npm install separately it will be installed in those two folders. If you want to install additional packages, just run npm install + "the name of the package" (without the '+' and without the quotes) inside of that particular folder where you need it (backend or/ and frontend).
I hope this was helpful. Check out the pics, especially the 2nd one.
App structure
Folder structure
UPDATE:
In development, I suggest installing two additional things:
npm i -D nodemon
npm i -D concurrently
Note: The -D flag will install them as devDependencies.
nodemon is going to track every file change and restart the backend server for you. So, it's obvious that it should be installed inside of the "backend" folder. All you have to do is go inside of the package.json file (backend) and add a new script. Something like this:
"scripts": {
"start": "node app.js", // in production
"dev": "nodemon app.js", // in development
}
concurrently allows you to start both your frontend and backend at the same time. I suggest initializing a new Node project inside of the top-level root folder -[folder which contains both, your frontend and backend]. You would do that with the npm init command, and after that, install the concurrently package there.
Now, go open your newly created package.json file inside of your root folder and edit the start section, like this:
"scripts": {
"dev": "concurrently \"cd backend && npm run dev\" \"cd frontend && npm start\" "
}
What this will do is go inside of the backend folder and run the dev command (the same one we just configured), so that will start nodemon. Additionally, it will also go inside of the frontend folder and run the default start command -which is exactly what we want.
If you kept the folder structure, installed all the dependencies (including the additional two I mentioned above), changed the package.json file inside of your root folder, you'll be able to start them both with a simple command:
npm run dev // make sure you're inside of the root folder when doing so :)
Adding to the accepted answer, the folder structure division inside the frontend and backend is more useful if it is based on business logic rather than tech logic.
Dividing the whole stack into self-contained components that preferably don't share files among them is the best way to make your app more testable and easy to update. This in the smallest possible way is what commonly known as microservice architecture.
Bad Design : difficult to update and test:
Good Design : easy to update and test:
Use Structure as per your requirement, like based on the project scope or depth. But make sure to keep the endpoints and models separate, so initially have a setup like such
src/
controllers - for the endpoints
models - for the schema
server.js - or index.js
How would a typical ExpressJs and Angular2 file structure look like.
At the moment i have this:
Project
|
|--bin
|--node_modules
|--public
|--images
|--javascripts
|--stylesheets
|--routes
|--views
|--app.js
|--package.json
In my public folder I have index.pug and layout.pug. This is the default structure as provided by expressJs. now that i want to add Angular2 where will i put my angular files? can i use boostrap with jade?let me add that am new to node. thanks
It seems what you're looking for is something similar to a standard MEAN-stack application (though your database may not be MongoDB). You should use Angular CLI to automatically generate an Angular2 project within that project directory as shown:
Project
|-angular2-project-directory/
|--src/
|--package.json
|--README.md
|--...(Other Angular CLI generated files)
|--routes/
|--views/
|--app.js
|--package.json
Hope this helps!
I'm currently trying to deploy a hapi.js app to heroku with this file structure:
.git
client
server
The hapi.js server is inside the server folder along with it's package.json file, node_modules and all that stuff.
Inside the client folder, I have all the front-end related things (small angular app with bower_components and a gulp script to inject everything). The server.js from /server is serving both the bower_components and the angular app related files.
My current problem is that, obviously, Heroku doesn't find a way to deploy my app because of its structure, since it needs to have the server and package.json on the root of the project (which i'm trying to avoid at all costs).
So far I tried to put on my Procfile the following:
web: node server/server.js
but unfortunately it didn't let me push because it didn't match any of its buildpacks.
Have you add .bowerrc file
.bowerrc file contains
{
"directory": "client/bower_components"
}
and add bower.json in root.