Building Apps for Crafting Static Websites for Google and Other Social Networks, as well as a Mobile App for iOS and Android
Go back to 2 step | Look web site for 3 step | Next 4 step 📚
In this tutorial, we embark on a step-by-step journey to construct a static website on React-Native using expo-router v2. Our goal is to build a website builder and mobile app constructor all in one, with maximum search optimization. The project itself spans a considerable scope, encompassing a Multilingual Website Constructor, user registration, payment capabilities, and an array of other features.
In the upcoming chapters, we will establish the foundation of this site's structure and introduce a multitude of navigational possibilities. As we progress, we'll lay the groundwork for seamless navigation and explore the potential for dynamic, user-centric experiences.
Enhancing Project Structure: Moving 'app' to 'src' and Adding SCSS in Expo-Router V2
Moving App Folder to src Directory and Adding SCSS to Expo-Router V2
In the journey of developing our project, there comes a pivotal moment when we must make strategic architectural decisions. With the introduction of Expo-Router V2, we gain the power to transform our project's structure and enhance its development. This article will guide you through the process of moving the 'app' folder into the 'src' directory and seamlessly integrating SCSS, paving the way for a harmonious and scalable application.
In the previous version of Expo-Router, we faced constraints that limited our ability to organize our project effectively. The router layer couldn't be nested within the 'src' directory, which hindered the project's overall architecture. However, Expo-Router V2 brings a refreshing change, granting us the freedom to restructure the project to our advantage.
Let's embark on this transformational journey step by step:
-
Remove Node Modules: Begin by removing the 'node_modules' folder to ensure a clean slate for the upcoming changes.
-
Reorganize the Project Structure: Take the leap and move the 'app', 'components', and 'constants' folders into the 'src' directory. This reorganization is a crucial step that sets the foundation for a more organized and maintainable project structure. After making these changes, launch the project and observe the enhancements.
-
Replicate Assets: Duplicate the 'assets' folder and place it within the 'src' directory. This duplication ensures that all necessary assets are in place, contributing to a seamless transition.
To harness the full potential of your project, it's time to introduce SCSS into the mix. A significant milestone in modernizing your development approach, SCSS empowers you to create dynamic and visually appealing designs. Previously, inline styles were the norm, but with this update, we're equipped with a more robust and organized styling solution.
Follow these steps to incorporate SCSS:
-
Preparing the Project: First, ensure you have the necessary dependencies by running npm install. This step guarantees that you have everything needed for a smooth integration.
-
Configuring SCSS: Adjust your project settings to accommodate SCSS. This recent capability has unlocked new possibilities, allowing us to break free from the limitations of inline styles.
-
tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["./src/*"]
}
},
"extends": "expo/tsconfig.base",
"include": ["/*.ts", "/*.tsx", ".expo/types/**/*.ts", "expo-env.d.ts"]
} -
metro.config.js
// const { getDefaultConfig } = require("../../expo/packages/@expo/metro-config");
const { getDefaultConfig } = require("expo/metro-config");
const config = getDefaultConfig(__dirname, {
isCSSEnabled: true,
});
config.resolver.sourceExts.push("svg");
config.resolver.assetExts = config.resolver.assetExts.filter(
(ext) => !config.resolver.sourceExts.includes(ext)
);
config.transformer.babelTransformerPath = require.resolve(
"./metro.transformer.js"
);
metro.transformer.js
const upstreamTransformer = require("metro-react-native-babel-transformer");
module.exports.transform = async (props) => {
if (props.filename.endsWith(".svg")) {
return require("react-native-svg-transformer").transform(props);
}
// Then pass it to the upstream transformer
return upstreamTransformer.transform(props);
};
babel.config.js
module.exports = function (api) {
api.cache(true);
return {
presets: ["babel-preset-expo"],
plugins: ["react-native-reanimated/plugin", "expo-router/babel"],
};
};
module.exports = config;
This seemingly small but incredibly significant step should not be overlooked. By adopting this architectural overhaul at the project's inception, you're setting the stage for future growth, scalability, and an enhanced development experience.
With your project now residing in the organized embrace of the 'src' directory and empowered by the flexibility of SCSS, you're ready to embark on a journey of creativity and innovation. Unleash your creativity to craft stunning, adaptive designs that bring your website and application to life.
As the project evolves, remember that thoughtful architecture and adaptable styling are your allies. Together, they form the bedrock upon which your digital dreams will flourish. Happy coding!
Roman Bolshiyanov < status : open for cooperation, look job >
The Expo source code is made available under the MIT license. Some of the dependencies are licensed differently, with the BSD license, for example.
